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
ADVERTISEMENT
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
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
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
View Related
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
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
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
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
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
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
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
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
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
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
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
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
Jun 26, 2007
I'm sure some wizard will tell me this is a classic example of "piece of cake"; in which case I bow and promise to listen In case I've struck granite rock, feel free to throw questions my way and I'll tell you if I've tried it or not.
I have a file, main.php (I know this is the JS-forum, bear with me). It outputs HTML and inline Javascript functions. When the user clicks on a graphical "tab", that tab is activated, and an ajax call is made to fetch.php with some specific parameters. Once the ajax request has completed, a given innerHTML container on the now active tab is filled with the stuff that fetch.php outputs.
So far so good.
The problem is that the stuff that fetch.php outputs is partial pure HTML and partial inline javascript. And this is where it gets tricky. If I declare an inline javascript function in the returned data, Firefox (and I suspect MSIE) refuses to understand that the function is there. It simply doesn't exist (!).
Using the Web Developer add-on for Firefox, there's an option to look at "Source code" and "Generated source code". The output from these two differ in that when I view the "Generated source code", I see the dynamically inserted javascript/HTML from fetch.php, whereas viewing "just" the source doesn't.
What did I do wrong? How do I get the browser to find/accept/activate the javascript code/functions that were inserted dynamically? I cannot put them in a .js file and include it, since they need to be dynamically created, and I cannot use eval() since that executes javascript "as is", in which a function will not be executed unless called.
View 5 Replies
View Related
Oct 12, 2011
I have just spent a while searching how to use regular expression to strip out spaces in a string and replace them with ',' I don't seem to be getting anywhere and was hoping someone could explain how to do it.
So for example:
Mystring = "a b c d"
My string would end up looking like the following
Mystring = "A','b','c','d"
View 1 Replies
View Related
Jul 23, 2005
The situation is; I receive a response back from the server which i only a part of html code. e.g. a table like <table <tr><td>high</td></tr>........ </table>. In other words, I receive
file as a response which has a part of html file.
My aim is to replace an existing document node with the new response.
If I run the following lines (JavaScript):
var parsedText = document.createTextNode(req.responseText);
body.replaceChild(parsedText, toReplace)
It replaces the node 'toReplace' with html codes with the tags include which is not what I want. The html tags are not wanted but should display in correct format as specified by html (a tabular form if htm tag is <table>)
If I try:
View 4 Replies
View Related
Jul 17, 2008
I was trying to find a browser independent way to raise a modal dialog. I know that MS IE has showModalDialog and Firefox has an attribute modal for window.open but I was wondering if anyone knew of a solution out there that would disallow anyone to browse from a pop-up window without closing it. Disabling the text highlighting and right click are not required, just disabling the user from browsing with the dialog open.
View 4 Replies
View Related
May 7, 2010
i just want to find particular li with specific class and change the background by adding class when that li is click.[code]
View 1 Replies
View Related
Oct 7, 2011
I am having some problems with a script I am using for my website. It works ok in all the browsers except IE6 and I don't have a clue why. If you click on any thumbnail (provide you don't use IE6) you can see how the script works: [URL] In IE6 if you click on the thumbnail, nothing happens. The thing is I don't get an error message or anything. Now, here's the code I used.
script:
Code:
...
<script type="text/javascript">
function change_image(image)
{
[Code]....
Curiously if I view in IE6 my local copy of the website on my computer, the script works a bit, in that the big pictures come up but the overlay and the close button don't so you can't close the pix and if you click on another thumbnail the following big picture overlaps the previous one. But this is only the local copy as I said, the live site doesn't work at all in IE6.
View 3 Replies
View Related
Mar 20, 2011
I have this simple gallery that loads images from an xml file and usesFancyboxto display the images. Demo Everything is working but the last image is not working with fancybox. The last image just displays in it's own window.
[Code]...
View 10 Replies
View Related
Oct 29, 2010
I have spent more than 6 hours on the issue of having angle tag link wrap around the images using jquery cycle plugin but with no avail. It works fine on IE but Firefox. Since visiting the demo [URL] doesn't work I added javascript to replicate a parent div "#slider" for the <a> but only the first image works. Here is a little idea of the layout about my code:
<html>
<head>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.cycle.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.easing_1.3.pack.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/ui.core.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.scrollfollow.js"></script> .....
View 4 Replies
View Related
Jan 10, 2012
I have a working version of a jQuery image slider that can be seen here. I am trying to implement this into a new website and have copied the code exactly but for some reason the images are not rotating or switching when the thumbnails are clicked. The new slider can be see here - I have it in a test page so that there is no possibility of any other scripts conflicting.
View 2 Replies
View Related
Mar 19, 2011
I have this code for a hover effect, it was working, but now won't. jQuery is working, but events from jquery aren't...
$(document).ready(function () {
$("#logoimg").hover(function () {
$("#logoimg").attr("src", "Media/imgover.png");
$("#logoimg").animate({ width: 420 }, 300);
}, function () {
[Code]...
View 3 Replies
View Related
