I wrote code first without using functions to prototype, and of course, it worked fine:
$(function() {
$(".PortfolioFade img")
.mouseover(function() {
popup('PORTFOLIO');
var src = $(this).attr("src").replace("images/paperclip.png", "images/paperclip-black.png");
/*var src = $(this).attr("src").match(/[^\.]+/) + "-black.png";*/
$(this).attr("src", src);
})
.mouseout(function() {
;
/*var src = $(this).attr("src").replace("images/paperclip-black.png", "images/paperclip.png");
$(this).attr("src", src); Look at popup.js mouseover events*/
});
});
However, when I expressed the same in function form, the function call didn't seem to work.
$(document).ready(function() {
// put all your jQuery goodness in here.
$('body').hide().fadeIn(1000);
function ImageRollover(image_element, popup_name, original, replacement)
{
$(element)
.mouseover(function(){
popup(popup_name);
var src = $(this).attr("src").replace(original,replacement);
$(this).attr("src",src);
})
.mouseout(function(){
;
});
}
ImageRollover(".Portfolio img",'PORTFOLIO',"images/paperclip.png","images/paperclip-black.png");
});
Defining the function elsewhere didn't seem to have any effect either.
Is this what you are trying to achieve?
function ImageRollover(element, popup, original, replacement)
{
$(element).mouseover(function(){
//popup(element);
//var src = $(this).attr("src").replace(original,replacement);
$(this).attr("src",replacement);
})
.mouseout(function(){
$(this).attr("src",original);
});
}
http://jsfiddle.net/SqyDg/
Your function is defining the first variable as image_element, but you're referring to it as just element in the code. That's quite likely one factor to it not working.
You'll likely also encounter an issue with the keyword this inside your function. It isn't referring to the same object as in the original code (which jQuery sets to the HTML element for you). In your function, it is likely not being set to anything thus it's a link to window.
function ImageRollover(image_element, popup_name, original, replacement)
{
$(element)
Where element is defined?
May be you mean:
function ImageRollover(image_element, popup_name, original, replacement)
{
$(image_element)
Related
Looked for the answer all over, tried reading seperatly but couldn't find an answer..
I have a site, on which Google Tag Manager is implemented, and I need to extract the id of a clicked button (or its parent).
this is my code:
function(){
$(document).ready(function(){
var editid;
$('div.uk-button').click(function() {
editid = $(this).attr('data-id');
});
return editid;
});
}
Thanks!
The simplest approach is to create the following custom javascript variable:
function(){
return $({{Click Element}}).attr('data-id');
}
This will return the data-id attribute for all events (including clicks).
Attach this variable to the relevant event tag, and use click class contains uk-button as the trigger.
You can remove the outer function and code like below.
$(document).ready(function () {
$('div.uk-button').click(function () {
var editid;
editid = $(this).attr('data-id');
alert(editid);
});
});
Hey it looks like you may be not be catching the returned value of the document ready callback.
For example, this returns undefined since the return of $(document).ready() callback is not being returned by the containing function:
function testfunc() {
$(document).ready(function(){
var editid = 'this is the return value';
return editid;
});
}
testFunc()
"returns undefined"
I'm guessing that you might be trying to set up a custom javascript variable in GTM. You can still use document ready to ensure the elements are present but the returned value needs to be returned by the outer function for it to be passed into the variable.
So your example should work as follows:
function(){
var editid;
$(document).ready(function(){
$('div.uk-button').click(function() {
editid = $(this).attr('data-id');
});
});
return editid;
}
<globemedia id="1"></globemedia>
<script type="text/javascript">
$("globemedia").each(function(index, value) {
var globeIDxMedia = $(this).attr("id");
$.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){
$(this).html(a);
});
});
</script>
The above Script i use to load content to my customized tag say <getmedia id="1"></getmedia>
script works fine till getting data from the page getmedia.jsp but when i use $(this).html(a); its not loading the data.
Got Answer from jquery forum
It'll work with custom tag as well
<script type="text/javascript">
$(document).ready(function(){
$("div[data-globalmedia]").each(function(index, value) {
var globeIDxMedia = $(this).attr("id");
$(this).load("getmedia.jsp?mediaID="+globeIDxMedia);
});
});
</script>
jQuery expert gave me solution you have to use $(document).ready(function(){}); and it works like a charm
Keep a reference to $(this) outside the $.get() function.
<script type="text/javascript">
$("globemedia").each(function(index, value) {
var globeIDxMedia = $(this).attr("id");
var self = $(this);
$.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){
$(self).html(a);
});
});
</script>
The meaning of this is different within the callback of $.get than it is within the callback of the outer $().each. You can read more about the semantics of this here: http://www.sitepoint.com/javascript-this-gotchas/
As a rule, if you want to refer to the "outer" value of this within a callback function, you first have to bind it to a variable that is accessible within the callback (in this case, I've used the common convention of a variable named self).
You can't this ( which refers to globemedia ) within $.get() callback function scope. Within $.get() callback function this refers to something else but not globemedia.
So, get keep reference of this outside of $.get() which refers to globalmedia like following:
$("globemedia").each(function(index, value) {
var globeIDxMedia = $(this).attr("id");
// keep referece to this
// ie. globemedia
var media = $(this);
$.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){
// here self refers to
// globemedia element
media.html(a);
});
});
Note
I think $("globemedia") should be $(".globemedia"). That means you should use a class selector.
You can't make your own custom HTML tag. See HERE
As you can't create you own HTML tag (here, globalmedia), instead of that you can use data attribute to them. For example:
<div data-globalmedia="media1" id="id_1">Media 1</div>
<div data-globalmedia="media2" id="id_2">Media 2</div>
and so on. And for jQuery you can use:
$('[data-globalmedia]').each(function() {
var globeIDxMedia = $(this).attr("id");
// keep referece to this
// ie. globemedia
var self = $(this);
$.get("getmedia.jsp?mediaID=" + globeIDxMedia, function(a) {
// here self refers to
// globemedia element
self.html(a);
});
});
Working sample
I'm having a few issues getting a simple JQuery function to work that fades an element out, replaces the image within and fades back in again.
My function looks like this:
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html="<img src='page4.jpg'>";
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html="<img src='page5.jpg'>";
$("#rightPage").fadeIn("slow");
});
}
The fade in/out section works fine but the HTML is not being replaced with the new images. Can you see a problem with this?
function nextPage() {
$("#leftPage").fadeOut("slow", function () {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function () {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
You're assigning a string to .html which is actually a function that takes a string as an argument, instead of being a property you can assign things to.
Notice I've changed .html = "" to .html("") in the above snippet. This now passes a string to .html(), which updates the element accordingly.
The correct syntax for .html() is:
$("#leftPage").html("<img src='page4.jpg'>");
Try this:
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
jquery's html is a function, not a property. You pass in the html you want to replace the elements contents with as a parameter
Try:
$("#leftPage").html("<img src='page4.jpg'>");
and:
$("#rightPage").html("<img src='page5.jpg'>");
You're using jQuery's .html() wrong
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
I had applied this slide mechanism to a page, and it worked fine for a while. I can't remember changing anything at all, but now it won't function properly.
Here is the code:
$(document).ready(function () {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function () {
var href = $(this).attr('href');
if (hash == href.substr(0, href.length)) {
var toLoad = hash + '.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function () {
$("#story_pane").animate({
marginLeft: 360
}, 250);
$("#main_content").animate({
marginLeft: -600,
opacity: 0.3
}, 250);
$("#main_content").css();
});
alert("test");
var toLoad = $(this).attr('href') + ' #content';
$('#content').hide(1, loadContent);
$('#load').remove();
$('#story_pane').css("display", "block");
$('#story_pane').append('<span id="load"></span>');
$('#load').fadeIn(1);
window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);
function loadContent() {
$('#content').load(toLoad, '', showNewContent())
}
function showNewContent() {
$('#content').show(1, hideLoader());
}
function hideLoader() {
$('#load').hide();
}
return false;
});
Only the "test" alert executes properly, I had been looking for any brackets i forgot to close, or other syntax issues but i'm in a bit of a dead end. I do have the files backedup, but that's a last resort option, in case I can't fix this.
edit- works now, I deleted $("#main_content").css(); and added a click function which fixed it
Change this:
function loadContent() {
$('#content').load(toLoad,'',showNewContent) // remove the "()" here
}
The way you had that call to ".load()" coded, you were calling "showNewContent" at the time the load began, not when it finished. Same goes for the "showNewContent" function itself:
function showNewContent() {
$('#content').show(1,hideLoader); // again, remove "()" from "hideLoader"
}
It's important to keep clear the distinction between referring to a function by name when passing it as a parameter for some API that needs a callback, and the process of actually calling the function. In these cases, you need a reference to a function. (Yes, a function call can return a reference to a function, but that's not what's happening here.)
edit — Another significant problem you're going to have here is that the initial call to ".load()" to fetch the currently-relevant page based on the state of the nav will almost certainly not complete before the rest of that code has run. If there are any dependencies for the initialization on content loaded by that initial call to "load()", then that won't be in the DOM yet. You could fix this by stuffing all the code in the rest of the "ready" handler into the completion handler for that initial ".load()".
edit again — OK another problem is this line of code, right after the "alert()":
var toLoad = $(this).attr('href') + ' #content';
What is it that you expect this to be at this point? I think that jQuery will set this to refer to the "document" object, but you won't be able to get any "href" attribute from it like that. Maybe you want "window.location.href" there? I'm not sure what you're trying to accomplish, exactly.
This is what live and delegate are for.
I have the following markup with inline javascript and would like to change it to Jquery. Any help would be appreciated.
<a title="823557" href="/PhotoGallery.asp?ProductCode=471823557" id="product_photo_zoom_url">
<img border="0" onload="vZoom.add(this, '/v/vspfiles/photos/471823557-2.jpg');"
alt="823557"
src="/v/vspfiles/photos/471823557-2T.jpg" id="product_photo"></a>
I guess I would need to use this?
$(function(){
<---- somecode---->
});
$(function () {
$("#product_photo").load(function (e) {
vZoom.add(this, this.src.replace('T.', '.'));
})
})();
If $ doesn't work for some reason, this should also work. I incorporated Kranu's advice since that library most likely only needs the DOM loaded as a prerequisite, rather than the load event:
jQuery(function ($) {
$("#product_photo").each(function () { // in case there is more than one
vZoom.add(this, this.src.replace('T.', '.'));
});
});
Note that there is no need to put a separate bind event on the img because the $(function() { }) waits until the body loads.
$(function(){
vZoom.add(document.getElementById('product_photo'),'/v/vspfiles/photos/471823557-2.jpg');
});
Not exactly sure what you are trying to do, but essentially you would remove the image from the HTML and dynamically load it using JS. Once loaded, you would inject it in the DOM and set the onload event.
var jsImg = new Image();
jsImg.onload = function(){
vZoom.add(this,'/v/vspfiles/photos/471823557-2.jpg');
var img = document.createElement('IMG');
img.setAttribute('id','product_photo');
img.setAttribute('alt','823557');
img.setAttribute('src','/v/vspfiles/photos/471823557-2T.jpg');
img.style.border = 'none';
//inject image now in the DOM whereever you want.
};
jsImg.src = '/v/vspfiles/photos/471823557-2T.jpg';