Image Resizing - Ignore 2 Certain Images That Are Part Of My Header

Nov 27, 2010

Im using the below javascript to resize images on a forum I have created but I want it to ignore 2 certain images that are part of my header. Heres the code

<script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
[Code]...

View 8 Replies


ADVERTISEMENT

JQuery :: Determine If The Images Are Fully Loaded Before Resizing The Image?

Dec 19, 2011

i just want to know if there is a way on how to determine if the images are fully loaded before resizing the images. I currently develop a slideshow that display images from the server. I just found out that if the images is not fully loaded it return wrong height and width. I just want to determine if the images are fully loaded before i resize it.Height and width is important to my application because i need it to adjust margin of the images.

View 9 Replies View Related

JQuery :: Remove The Header Part Of The Menu Completely?

Sep 14, 2010

I'm using the default accordion example from the UI Demo page.I would like to remove the header part of the menu completely, where it says 'section'. Is there an option or something to do that??

View 1 Replies View Related

JQuery :: How To Make Only Part Of Accordion-Header Clickable

Aug 3, 2011

I want only the Text to be clickable in the accordion-header. I thought the header option is the right way to do so, but it doesn't work. Instead of h3 i want only the link to be clickable:
$(function() {
$( "#accordion" ).accordion({header:'a'});
});
<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

View 1 Replies View Related

Resizing And Caching Images On The Fly.

Nov 8, 2006

I have a function which caches images for a slideshow once the script has loaded. Here is an exerpt:

var base_ref = "http://www.example.com";
var images = new Array();
var tmp_images = new Array();
tmp_images[0] = "image1.jpg";
tmp_images[1] = "image2.jpg";
tmp_images[2] = "image3.jpg";
tmp_images[3] = "image4.jpg";
tmp_images[4] = "image5.jpg";

function cache_images () {
for (var i=0; i < tmp_images.length; i++){
var cacheimage=new Image();
var tmp_name = tmp_images[i];
var url = tmp_images[i] + ".png";
cacheimage.src=url;
images[tmp_name]=cacheimage;
}
}

As it is, the script whizzes through the for loop, and then moves on to the next function. The only trouble is that it moves on to the next function whilst it's still downloading the images from the server. Is there anyway to make the script wait until the downloading is completed, so that I can then go on to resize the images if it's needed?

View 2 Replies View Related

JQuery :: Images Resizing Not Working Properly?

Apr 20, 2011

I have a lot of images on a page and the have to be a little bit larger, so i dont want to change all of the css.I have made a couple of lines of code which doesn't give the right values back.The images have all diffrent sizes.

$('.imgbox').each(function(){
var getX = $(this).width();
var getY = $(this).height();[code]....

there's probably some thing wrong because it gives me very big values back.

View 2 Replies View Related

Cycle Through And Fade Images In Header Of Webpage

Jan 19, 2010

I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:
// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")

Here is the code in the master page which finds the javascript:
<script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>

Here is the function call in the masterpage to fade and cycle the images:
<body onload="FadeAndCycleImages()">

Here is the code in the masterpage which references the cycling images:
<span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>

Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file.

View 4 Replies View Related

JQuery :: Resizing Images Of The Cycle Pager-Navigation?

Mar 18, 2010

I'm using the Cycle Plugin for a slideshow with a pager-nav .The AnchorBuilder gets the imagesource from "slide.src" - this is the same source as for the big image. Since I'm using rather big PNG's (500kb each) this double up the total pagesize. Is there a way to scale down these thumbs?I'm using Drupals Imagecache - so I do have access to scaled thumbs. But I dont know how the get Cycle to use them (printing a php array inside a javascript?).My script looks like this:

$(document).ready(function(){
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
$(pager).find('li').removeClass('activeLI')[code].....

View 4 Replies View Related

Basic Slideshow - Images Listed In Header Correctly Named

Aug 3, 2011

Piece of simple javascript that I can't get to behave. It's a basic image/slideshow.....
in the <head> section.....
<script type="text/javascript">
var image1=new image() image1.src="../Images/WebSite/HomePage/HpLavender.jpg";
var image2=new image() image2.src="../Images/WebSite/HomePage/HpCreams.jpg";
var image3=new image() image3.src="../Images/WebSite/HomePage/HpBathMelts.jpg";
var image4=new image() image4.src="../Images/WebSite/HomePage/HpCandles.jpg";
var image5=new image() image5.src="../Images/WebSite/HomePage/HpMostlyMen.jpg";
</script>

And then in the body:
<img src="../Images/WebSite/HomePage/HpLavender.jpg" name="slide" border="0" alt="">
<script type = "text/javascript">
var step=1;
function slideit() {
if (!document.images) {return}
document.images.slide.src=eval("image"+step+".src");

if (step<5) {step++}
else {step=1}
setTimeout("slideit()",2500);
}slideit();
</script>

The coding seems to be tripping up on the line:
document.images.slide.src=eval("image"+step+".src");
(I inserted document.write statements before and after this line and only received the 'before' statement).

The image before the javascript kicks in
<img src="../Images/WebSite/HomePage/HpLavender.jpg" name="slide" border="0" alt="">
displays fine - and the images listed in the header are correctly named.

View 2 Replies View Related

Image Insertion Page That Is Part Of A JS WYSIWYG - Put Caption Bar After The Image In The Main Code?

Nov 27, 2011

I have an image insertion page that is part of a JS WYSIWYG. It works okay, but I would like to add a styled caption bar underneath it.

This is what I'm currently using for the caption (inserted by a button):

Code:

This is the code from the insert image page:

Code:

How do I put the caption bar after the image in the main code?

View 1 Replies View Related

Image Resizing

Mar 19, 2007

We are code crushing the width of images from 285px to 260 pix.
However we aren't changing the height. we need a bit of javascript
that can make that percentage change to the height as well.

View 6 Replies View Related

Image Resizing To Fit Image In Cell?

Mar 16, 2010

im trying to resize an image to fit it in a cell in my table which is a fixed width and height. The images im using have varying sizes some are more tall than wide and some are more wide than tall .

So im using this javascript code that i have got from somewhere on the net ( cant mind where now) that should hopefully resize the image keeping the aspect ratio but the code is not resizing the image .

my page for example is on [URL] and if you click the text "previous" or "next" you will see what i mean

View 2 Replies View Related

Add A Content (header) Over Image?

Nov 1, 2010

there are 4 parts to this script. I am trying to change it so that there is text content over the image.

part 1

meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>
<div id="rotator">

[Code].....

View 2 Replies View Related

To Add A Content - Header - Over Image

Nov 1, 2010

There are 4 parts to this script. I am trying to change it so that there is text content over the image.

part 1:

Code:

The "AD ONE" and "AD two" Content above is what I would like to show up over the image and roate with it.

I think I just need to change something in part 4 of the code but not sure were.

part two:

slideshow1.css

Code:

View 9 Replies View Related

JQuery :: Resizing Div When Image Not Loaded Yet

Aug 23, 2010

I am loading an html page using the .load() function into a div called content. I have an overlay that is the same size as the div (I do this for a transparent effect).So with the .load() function in the callback I set the overlay div height to the content div height.. which works fine except when there are images. Since the images aren't loaded yet the div height will be smaller than actual size.[code]and the html file can include anything such as video or images.I tried doing a .delay(1000) just to see if that would fix it but didn't seem like the delay was working.How would I properly set the overlay div height to the content div height AFTER the images have been loaded?

View 2 Replies View Related

Resizing - Need A 1x1 Pixel Image For Flagcounter

Aug 6, 2011

i would need a 1x1 pixel image for my flagcounter,ive been trying for months:([URL] (the stars for the image not to appear)

View 8 Replies View Related

Image Resizing Not Working / Solution For This?

Sep 12, 2009

Code...

So the idea of the code is to load an image from a record, and echo both scenarios of 1) the image being a valid size and fitting in the table, or 2) the image width is too large, so add on width='100%' to the image. After both rows have been loaded, call the javascript function in PHP to hide the appropriate table row.

View 3 Replies View Related

How To Constrain Proportions When Resizing Image

Nov 28, 2005

I'm attempting to integrate an image resizing interface (view source for code) on one of my projects.

When you resize the box, I'd like to keep the proportions (which I can set i.e. 4:3) instead of allowing you to freely transform it..

I've had no reply from the author, does anyone know how it could be made to constrain set proportions?

View 6 Replies View Related

JQuery :: Image Cropping/resizing Before Upload?

Jul 13, 2011

Could some-one please tell me (in simple words ? ) why client-side image resizing is not possible by JQuery - not just changing the breadth & height of an image but actually changing the image to decrease the image file's size ?

It seems possible in java & flash . I would like something like in :[URL].. I would like to have a smaller/fixed image size to upload to server, instead of doing the resizing on the server.

View 1 Replies View Related

IE 8 & 9 Not Resizing Container When Width Set In Image.load

Sep 19, 2010

The *small, medium fullsize* text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.

Code [URL] Line 154:

Code JavaScript:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');

[code]...

From what I can tell the `container.width(imageWidth);` is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.

View 2 Replies View Related

JQuery :: Background Image Inside Header

Dec 18, 2011

How can i put a background image on a header? So I can put text on top on it.

View 1 Replies View Related

Change Header Image Via Toggled Buttons?

Jul 26, 2010

What I've made so far is a page header image with 4 buttons to the side of that, which when clicked will change to a diff image (sprite image, triggered by some javascript I found on the net to change the class of the buttons so that the image changes - and it looks toggled). This works fine and if a 'toggled' button is clicked again then it will delete the class the javascript adds and 'untoggle' it. The final aim of this is when this page is first loaded then none of these buttons are toggled and a default image in the header is shown.

But when one is selected then I want the header image to change to one that is associated with the button that is pressed - I was able to achieve this with an onmouseclick action on the button to change the header image, but if the user then clicked the button again (untoggled it), how would I then be able to change the header image back to the default one? Could this be achieved by some javascript that changed the class of the header image to the one associated with the button pressed, and then if its pressed again then it clears the header image class?

Below is the code
HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
[Code].....

View 9 Replies View Related

Improve Image Quality On Resizing It By Mouse Dragging?

May 8, 2009

How can i improve image quality on resizing it by mouse dragging.

I need to do this using javascript. Can we achieve this using some scale factors.

View 1 Replies View Related

JQuery :: Keep Image Width / Height Ratio In Jcarousel When Resizing Page?

May 25, 2011

I've set up jcarousel and configured it to work how I need it to, apart from one thing; I need the images to keep their width - height ratio when the browser is resized.

I'm using the Flexible carousel configuration and the width of the images changes appropriately when the window is resized, but the height stays the same, I need it to change.

View 3 Replies View Related

Auto-resizing - Proportional Background Image With Minimum Size Preset

Aug 12, 2011

I'm close, but the issue is that if the window is opened at a size that is SMALLER than the original image, it wont scale down to the smaller size until i first make the window bigger, THEN size it down smaller. The image itself is big (its fashion photography so it needs to be high res) and the js sets the minimum width at 1070. Id like to have the image as big as possible and then on page load automatically drop down to as low as 1070px if the window size is small. Here is the js:

[Code]...

View 2 Replies View Related

JQuery :: How To Replace Only Part Of Image Source

Oct 6, 2010

I am trying to make a generic function called whenever the window size changes. I want this function to apply to several different images. The idea is that when the window is resized the function will only change the end of the source code by replacing "_small", "_medium", "_large" with the appropriate size depending on the window. The problem is that when I use the code below it makes ALL of the images the same. The variable imageRightIdStr genereates a list of ids of all of the images that I would like this function to affect. ex: #imageRight101,#imageRight201,#imageRight202,#imageRight203,#imageRight301 etc.

Here is the code that I have now. It mostly works except it makes all of my "imageRight_" images the same.
var contentwidth = $('#background').width();
if ((contentwidth) < '1175') {
var logo= $('#pageLogo');
var rightImage = $('.rightImage');
logo.attr('src',logo.attr('src').replace('_large','_small'));
logo.attr('src',logo.attr('src').replace('_medium','_small'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_large','_small'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_medium','_small'));
}else if ((contentwidth) < '1440' && (contentwidth) > '1175') {
var logo= $('#pageLogo');
var rightImage = $('.rightImage');
logo.attr('src',logo.attr('src').replace('_large','_medium'));
logo.attr('src',logo.attr('src').replace('_small','_medium'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_large','_medium'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_small','_medium'));
}

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved