JQuery :: Image Replacement Firing In Chrome?

May 2, 2010

my understanding is that one of the great benefits of $(document).ready() is that it will execute code once the DOM is ready, yet prior to content being loaded.

For my example, with what I'm observing in Chrome (I'm on a MAC), I'd like to replace a default image with a different image, without seeing jQuery do the work. However, in Chrome, I see the original image for a brief instant before the jQuery replacement pops in. Why the flicker of the original image? Perhaps I'm not understanding the particulars of what is firing, and when its firing...

You can view online here, and refresh a few times to see the flicker in Chrome:

[Code]...

View 7 Replies


ADVERTISEMENT

Text Replacement In Conjunction With Image Replacement?

Mar 15, 2010

I've been working with HTML, CSS, and PHP for the past few years. I've decided to add some interactivity to my websites and one of the new courses requires JS in our implementations, so I figure why not.

Anyhow, more to the point...the topic is a bit vague, but I didn't want to put a 50 word topic either so bear with me as I try to explain :D :

Okay, so I'm designing an art portfolio page and I have a 250x250 pixels preview shot of an art piece on my side bar at the top. There is a horizontal column at the bottom of the page (before the footer) that contains about 6 to 8 mini thumbnails around 100x100 pixels. Right now, I am able to make it so that if I mouse over the bottom thumbnails, the 250x250 at the sidebar is replaced to reflect what was hovered at the bottom, only in a bigger size.

This is my current coding:

<script type="text/javascript">
<!--
function change_img(path) { document.large_img.src=path}
function preload(){

[Code]....

I'm not even sure if that's the correct or most efficient way to do it...it took me a while to figure out, and it finally worked so I went along with it.

What I want to do, and what I need help with is...I'd like to give the current artwork, or the piece that's currently @ 250x250 pixels at the sidebar a title. Preferably, perhaps from the context of the alt tag from an img src but not required. However, I would like for it to change to the corresponding pieces' title when I mouseover, so for example:

250x250 piece1's name is ...art1 and that name is located right under the image.

I mouse over the bottom thumbnails to the 5th thumbnail, the 250x250 piece1 is replaced and becomes 250x250 piece5. I'm trying to make it so that art1 becomes art5.

View 5 Replies View Related

Jquery :: Max / Min Functionality For Image Replacement

Mar 24, 2009

I am using jquery in my current application to add min/max functionality, i.e, when the user close at maximize, table gets maximized, when clicked on minimize, table gets minimized. It works fine functionality wise, but, ideally, when maximized, max image should replace with min image and vice-versa, but images gets replaced only when clicked 2nd time around, for very first time, images don't get replaced, though the system works fine,

Here's how I am calling the function:
<a href="javascript:void(0);" onclick="showinghide('contacting')"><img src="images/arrows/opened.gif" id="contactingarrow" class="myarrows"></a>

Here's the function:
function showinghide(oobj){
if(oobj=="contacting"){
jQuery("#contacting").toggle('slow');
mycookies("contacting");
}
And the jquery code is:
function mycookies(myobbj) {
var mycookiesvar=myobbj+"cook";
if(jQuery.cookie(mycookiesvar)){
if(jQuery.cookie(mycookiesvar)==myobbj+"hide"){
jQuery.cookie(mycookiesvar,null);
jQuery.cookie(mycookiesvar,myobbj+"show",{expires:365});
jQuery("#"+myobbj+"arrow").attr({'src':'images/arrows/open_bk.gif'})
} else if(jQuery.cookie(mycookiesvar)==myobbj+"show"){
jQuery.cookie(mycookiesvar,null);
jQuery.cookie(mycookiesvar,myobbj+"hide",{expires:365});
jQuery("#"+myobbj+"arrow").attr({'src':'images/arrows/close_bk.gif'})
}} else {
jQuery.cookie(mycookiesvar,myobbj+"hide",{expires:365});
}}

View 5 Replies View Related

JQuery :: Image Replacement Not Working?

Oct 4, 2011

I have a big image and several small thumbnails. Every time the user clicks on one of the thumbs, I want the big image to update. This is my code:

Code:
$("#thumbs a").click(function() {
var largePath = $(this).attr("href");
$("#largeImg").attr(src: largePath);

[code]....

Although, the thumb image gets always displayed in an empty window, as if there is no "return false". If I click Back in the browser, I see that the big image has been indeed changed just before the link executed. Why is my "return false" not firing and preventing the browser from following the link?

View 3 Replies View Related

Jquery :: Image Replacement Dimensions Won't Reset

Feb 12, 2010

I have a photo gallery built with XML and PHP (pulling images from a client's Myspace albums).The gallery works fine, displays thumbnails and captions, paginates properly, etc.The whole thing is loaded by AJAX into a div, which complicates things a bit, but it works.When a visitor clicks a thumbnail, the full-sized image displays in a div overlay on top of the gallery div.The overlay is hidden until a thumbnail is clicked, when it is toggled to "visibility:visible". When the overlay "close" link is clicked, the overlay is hidden again.That also works. Some of the images are too large to display properly inside the div without throwing off the layout, so I had to set a max height and width.I can't just use CSS to set the dimensions or it'll size EVERY image to those dims, and the photos are all different sizes...some wider, some longer.So I used javascript to check the image size when the thumbnail is clicked.

All of that worked.(Although strangely, if I try to toggle the visibility as part of the function rather than putting it into the link, it doesn't work!)The problem is that once the dimensions of "img1" are set, they STAY that size even when the next thumbnail is clicked.So if the first image is 800px tall, the script crops it to 640px...then the next image may only be 400px pix tall but it displays as 640px high, making it distorted.I tried to add a "resetImgSize" function to the "close" link in the overlay, setting the img1 dimensions back to 2px x 2px when the overlay is closed, but the same thing happens...Once the img1 dimensions are set to 2x2px, they stay that way even when a new thumbnail is clicked.

View 10 Replies View Related

Chrome Not Firing Window.addEventListener Keypress

Aug 20, 2010

On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:

igevt=function(evt){checkclosegal(evt)}
window.addEventListener('keypress',igevt, false)
and checkclosegal:
function checkclosegal(evt)

[Code]....

This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index?

View 3 Replies View Related

Chrome Not Firing Window.addEventListener Keypress?

Aug 20, 2010

On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:

igevt=function(evt){checkclosegal(evt)}
window.addEventListener('keypress',igevt, false)
and checkclosegal:
function checkclosegal(evt)

[Code]....

This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent).

View 2 Replies View Related

Basic Image Replacement

Apr 2, 2005

I've been looking at all the various image replacement techniques..and they all seem unnecessarily complicated. I came up with:

function replaceLogo() {
document.getElementById('header').innerHTML = '<img src="/images/logo-tci.gif" />'
}
It's just replacing the layer contents at a very basic level.

This works just fine, I'm just wondering how well supported it would be across different browsers. Anyone know of a table of browsers that support innerHTML or see potential cross-browser issues with this technique?

View 2 Replies View Related

Finding A Code For Image Swap/replacement?

Mar 29, 2009

I'm looking for a code (as simple as possible) for an image swap / replacement feature similar to these: [URL]Either is fine. One works w/ mouseover, the other works with a click.Dynamic Drive doesn't have one.

View 5 Replies View Related

JQuery :: Cycle Showing Last Image First In Chrome?

Aug 5, 2010

This is something of a continuation from my previous problem[URL]The images seem to be showing properly the first time. Unfortunately, when the slide show starts, Chrome is showing the last image in the group first. This wouldn't be a problem normally, but I plan in showing the images in an order based on their last modified info.

View 4 Replies View Related

JQuery :: $.get For Image Is Failing In IE8 But Works In Chrome And FF

Aug 30, 2011

This succeeds in Chrome and Firefox but fails in IE8

$.get('/2/mpeg4.jpg')
.error(function(jqXHR, textStatus, errorThrown) { alert(textStatus); alert(errorThrown);})
.success(function(data, textStatus, jqXHR) { alert(textStatus); alert(jqXHR.responseText);});

[Code].....

View 4 Replies View Related

Jquery :: Image Slider Not Sliding In Chrome

Feb 16, 2011

The script is written in Jquery, it's a simple piece of code which I've seen on another website here [URL]. I modified the code a bit to work with a website I made for my portfolio. The problem with the code is that is works fine in firefox but it doesn't on chrome. the code doesn't break entirely but on chrome the images doesn't slide, it just jumps from image to image. here's the code

Code:
var settings = {
startingPosition : 0, //--------------------------------set starting position for images, 0 for first image
slideSpeed : 550, //---------------------------speed of slide, seconds/fast/slow
easing : 'linear', //-------------------------easing type
navigationClass : 'slider_navigation', //--------------class of navigation (the prev and next)
activeItemClass : 'slider-current-active-element', //--name of class to be added to first element
repeat : true, //-----------------------------make gallery neverending .....

Most of it works fine but I'm guessing the animate part in the problem
Code:
//the slide animation
elContainer.animate({
'marginLeft' : animateToWidth
}, opt.slideSpeed, opt.easing,
function(){
//if forward is clicked
if(opt.repeat && direction == 'forward'){
$("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
elPosition += imgWidth;
elContainer.css({
'marginLeft' : elPosition
});}

Here's the dummy site I made [URL]. I'm no expert on javascript so how to make the code better?

View 6 Replies View Related

JQuery :: Image Won't Load 2nd Time In SF & Chrome

Aug 9, 2010

Have a light box script I built and it works fine in IE, FF, Opera but in both Google Chrome and Safari the image doesn't load if you try to fire it again. In easier terms, if you click on the image that fires the event and shows the 'super sized' image in the light box it works fine the first time. If you then close the lightbox and click on the image again the lightbox shows up but there is no image. I even added some alerts to see what was happening and in IE, FF & Opera both the alerts fire all the time, in Safari and Chrome they both fire the first time but the second time only the 1st alert fires.

[Code]....

View 2 Replies View Related

JQuery :: Image Doesn't Work Properly In Safari And Chrome?

Nov 1, 2010

I've hosted a test suite at: Webkit Bug Clicking on the enlarged image doesn't work properly in Safari and Chrome.

View 2 Replies View Related

JQuery :: Image - Using Append() With Anchor Links In WebKit (Chrome/Safari)?

Mar 22, 2011

Been trying to add an image before the closing of the anchor tag:

<body>
<a href="http://www.test.com/">http://www.test.com/</a>
</body>

If I use:

$("a").append("<img src='testimage.png' /");

No image will appear in WebKit (Chrome, Safari, etc). Firefox and IE works fine.

View 2 Replies View Related

JQuery :: DOM Button Replacement Via .replaceWith()?

Oct 30, 2011

Testing page: [URL]...Testing info: username: claudion ; psw: bolibokhan Background: You enter some text in message editor textbox; press send; page (& not popup) appears stating 'Message successfully recorded...return to message'Send button HTML <input type="submit" value="Send" class="button2" name="post">

Limitations: Cannot edit template/html ...had to be done via javascript/jquery Objective: to replace Send button with a custom one such as one you press it (after message is entered) you be redirected back to your current page(URL) & 'Message successfully recorded...return to message' page is thus skipped.

[Code]...

View 2 Replies View Related

JQuery :: Taking Baby Steps: Adding Fades To Container Replacement?

Aug 26, 2010

I've been stepping back and trying to understand basic ajax calls again. I want to build up a simple gallery. I've got that done, but now I want to add fades, and eventually slides effects to the main image. I can't figure out how to coordindate the timing or a fadeOut on the current image with a fadein on the incoming image. Any thoughts? Right now it just fades and the of course gets hidden.Also not sure if I should fade a container around the image, or the image itself as I've done here,

View 2 Replies View Related

Image Preview - Ok With FF, Doesn't Work With IE, Opera, Chrome?

Feb 4, 2011

Before image upload I want users to preview their choice. For some reason JS doesn't work with all browsers except FF.When a user selects file, JS preview function should insert it into #addPreview div where preview.gif is located as a default picture. If everything goes OK preview.gif is replaced with new selected file. Otherwise wrong size or file type is detected. Alert message appears in #addPreviewAlert div.Here's my code:

HTML CODE

Code:
<!-- ALERTS -->
<div id="addPreviewAlert"></div>
<!-- END ALERTS -->[code]...

Tell me why Firefox works as desired, but all other browsers don't allow any preview. They don't show any JS error messages and alerts either.

View 1 Replies View Related

Imagemap Image Flip Works In Chrome Only On CSS/HTML Valid Page?

Jan 5, 2010

this page (http://users.rcn.com/**************/test72.html) will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related

View 3 Replies View Related

Textarea Replacement

Oct 21, 2005

Is anyone in here familiar with the javascript textarea that is used by any of the textarea replacement WYSIWYG editors.. like SPAW, MoscCE and TinyMCE.

I found that they ALL wrap paragraphs in div tags rather then p tags and I was hoping someone could tell me how to fix this.

I did a batch replacement to replace all "div" with "p" but even that didnt keep the editor (SPAW) from using div tags instead of p tags.

View 6 Replies View Related

What Is The Replacement For OnBlur In Mozilla

Jan 21, 2006

What is the replacement for onBlur in Mozilla

<body STYLE='background-color:buttonface;' leftmargin=0 rightmargin=0
topmargin=0 bottommargin=0 onBlur="window.focus()">

View 1 Replies View Related

Prompt Replacement - Capturing Value

Jun 9, 2010

I have a very simple jquery RTE I've built. When adding a link I currently do this ( $.iframeread is just a function to pick the right way to "find" the iframe content for the browser being used)

[Code]....

I can obviously create this and show() it when I need to - what I don't know how to do is pass $('select[name="type"]').val() + $('input[name="link"]').val() back to the orginal function - ie how do I capture $link

[Code]...

View 2 Replies View Related

Replacement For Window.showmodelessdialog In Mozilla

Jan 17, 2006

what is the replacement for window.navigate in mozilla & i was used window.showmodelessdialog in IE5 - in mozilla it is not working

View 5 Replies View Related

Safari And Class Method Replacement

Jul 13, 2006

I use the following to translate button names in Google Maps:

G_NORMAL_MAP.getName = function(short) {
if(short) {return "Karta"}
return "Karta";
}

It works (tested) with Firefox 1.5 (Linux and Mac) and Opera 9 (Mac).
But Safari 1.3. says "Parse error".
What is wrong - code or Safari?

View 4 Replies View Related

Grouped RegEx Replacement With Variable?

Oct 1, 2010

I have searched and searched and tried many different options but can not get this to work although I am sure it is possible.I need to be able to replace a string using a variable as the search and replacing using the matched reference group such as $1 I can search for a variable and I can get the reference to work - but not both at the same time.The following works great - except it does not preserve the case of "Test" in the string

Code JavaScript:

var q = "test".toLowerCase();
var mystring = "My Test string";
var reg = new RegExp(q, "i");
mystring.replace(reg, "<mark>"+q+"</mark>");

This is the reason I can not simple replace with "q" and need to replace with what was actually found. But this does not work like this:

Code JavaScript:

var q = "test".toLowerCase();
var mystring = "My Test string";
var reg = new RegExp((q), "i");
mystring.replace(reg, "<mark>$1</mark>");

As "q" is a variable - how do I put parentheses around it so that I can reference it in the replace statement?

View 1 Replies View Related

Good Replacement For Select Element?

Jul 9, 2010

I was wondering if anybody knows of a good replacement for the select element. Maybe something using jquery?

View 7 Replies View Related







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