Here is my code:
HTML
<img src"../MyPic_1" id="MyImg_1" onclick = "MyJQfunction($(this))">
<img src"../MyPic_2" id="MyImg_2" onclick = "MyJQfunction($(this))">
<img src"../MyPic_3" id="MyImg_3" onclick = "MyJQfunction($(this))">
JQUERY
<script>
function MyJQfunction(MyField)
{
MyField.hide();
}
</script>
As you can see I'm trying to send the HTML element to my JQ Function so it knows what to hide.
What am I doing wrong?
NOTE: This is just a simple example of what I really need to do, I just want to avoid including codes that you don't care about. Thanks!
You are using jquery so attach an event handler instead of using onclick
<img src="../MyPic_1" id="MyImg_1" class="myIMage">
<img src="../MyPic_2" id="MyImg_2" class="myIMage">
<img src="../MyPic_3" id="MyImg_3" class="myIMage">
and
$(function(){
$('.myIMage').on('click', MyJQFunction);
}
function MyJQFunction()
{
$(this).hide(); //here this represents the element clicked.
}
Or classic way; use Function.call to set the context for the function while invocation.
<img src"../MyPic_1" id="MyImg_1" onclick = "MyJQfunction.call(this)">
and
function MyJQFunction()
{
$(this).hide(); //and this here is now the clicked element.
}
Also in your code your image tag seems to be incorrect and MyJQfunction versus MyJQFunction has casing (note the casing of f) issue. Check your console for errors. Otherwise your code should work.
This is what I would do:
<img src="../MyPic_1" id="MyImg_1" class="image_to_hide"/>
<img src="../MyPic_2" id="MyImg_2" class="image_to_hide"/>
<img src="../MyPic_3" id="MyImg_3" class="image_to_hide"/>
...
<script>
$(".image_to_hide").click(function(){
$(this).hide();
});
</script>
You should wrap that on jquery function like this
function MyJQFunction(MyField)
{
$(MyField).hide();
}
Related
I would like to change src attribute of my image and then read the width of the new image. Unfortunately JQuery load() function seems to fire before the image is loaded and width is set. Do you have any idea how to fix it?
function buildLoad(rc){
alert(rc.width());
}
var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(buildLoad(rc));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Try the onload event
$(document).ready(function(){
var rc = $('img.myimg');
rc.load(function(e){
console.log("Height:" + e.currentTarget.height, "Width:" + e.currentTarget.width)
});
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Specifically in your code the problem was that you called the buildLoad(rc) regardless of the load event. What you needed to do is call a wrapper function that will run once the load was done:
rc.load(function() { buildLoad(rc) })
function buildLoad(rc){
alert(rc.width());
}
var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(function() { buildLoad(rc) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Regardless - there are several known issues regarding the load event on images among current browsers which you can read more about here.
Use Jquery one function.
http://api.jquery.com/one/
Try the following code.
$("img.myimg").one("load", function() {
// Get width of the image
}).attr("src", "New path");
Im fairly new to javascript and I just can't figure this out despite my attempt in researching. How do I track the change of a input within a div and trigger an append to an outside div? My code goes as follow:
Append h3 with "Pending" once ".image-value" input has a change in value
<!-- APPEND <h3> -->
<h3>Best Overall Costume<div class="pending">Pending</div></h3>
<div>
<div class="select-form">
<img src="images/vote.jpg" data-value="image_value">
<img src="images/vote.jpg" data-value="image_value2">
<img src="images/vote.jpg" data-value="image_value3">
<img src="images/vote.jpg" data-value="image_value4">
<img src="images/vote.jpg" data-value="image_value5">
<!-- Track the change of this input -->
<input type="hidden" class="image-value" name="selected_image" value="">
</div>
</div>
I tried this:
function changeStatus(statusValue) {
$("input",".select-form").val(statusValue).trigger("change");
}
$("input",".select-form").change(function(){
if (!$(this).val()){
$("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this)));
}
});
But that didn't seem to work. Any ideas?
place an empty div where you want your new div and give it an id i.e(<div id='myDiv'><div>) and then append what you want like this.
$( "#myDiv" ).append( "<div class='pending'>Pending</div>" );
You can also check Append Explained
for more explanations.
Thanks.
I've done a couple things here... First, I'm not sure why you had it all in a named function. When you're using event listeners that often isn't necessary.
Then, I don't know what the val check was for, so I reversed it.
Finally, I'm using one(), which only runs once. This case seemed to call for that.
$('.select-form').one('change', 'input', function () {
if ( $(this).val() ) { alert('asdgf');
$("<div class='pending'>Pending</div>")
.appendTo($(this).parent().prev('h3'));
}
});
Fiddle
try this:
$("input",".select-form").on("change", function(){
var $this = $(this);
if (!$this.val()){
var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');
$this.parent().parent().before(elem);
}
});
you can also place a check, that if the pending div is already added, not to add it again.
Of course this solution assumes that there are no other nested divs between the target div(before which you want to append) and the input control
Is there something wrong with this code? I am trying to do the simple action of changing the src of an img named "midimg" upon mouse-click. It's not working and i don't know why
<script type="javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
</script>
<div onClick="buttonInCompany()">Everything is cage's cage.<br><br></div>
<img name="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">
Do you need the jQuery line? I just dropped it, than it works as expected.
function buttonInCompany()
{
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
Seeing as how you are apparently already using a js framework (I assume jQuery), why not do it a more proper way to begin with?
<script type="text/javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
$('#midimg').attr("src","http://cageme.herokuapp.com/css/mrcage.jpg");
}
$(document).ready(function() {
$("#someID").click(function() {
buttonInCompany();
});
});
</script>
<div id='someID'>Everything is cage's cage.<br><br></div>
<img id="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">
Ok so I have this
<img width="38" height="39" onclick="jreviews.favorite.add(this,{listing_id:2655})" class="imgFavoriteAdd" alt="Add to favorites" id="jr_favoriteImg2655" src="http://kingdomshopper.com/templates/jreviews_overrides/views/themes/default/theme_images/fav_add.png">
and as you can see the onclick is
jreviews.favorite.add(this,{listing_id:2655})
I need to change the onclick to
jreviews.favorite.remove(this,{listing_id:2655})
but when i do
jQuery("#jr_favoriteImg2655").attr("onclick")
onclick(event)
can i do
jQuery("#jr_favoriteImg2655").attr("onclick", "jreviews.favorite.add(this,{listing_id:2655})")
or is there a better or another way
You'll be lot better off if you remove the onclick attribute from your element and then do the following >
// Initializing >>
var first = function () { jreviews.favorite.add(this,{listing_id:2655}) };
var second = function () { jreviews.favorite.remove(this,{listing_id:2655}) };
jQuery("#jr_favoriteImg2655").bind("click", first);
and then when you want to switch >
jQuery("#jr_favoriteImg2655").unbind("click", first);
jQuery("#jr_favoriteImg2655").bind("click", second);
The usual way to do that (i.e. binding functions to events) is either bind or click:
jQuery("#jr_favoriteImg2655").click(function() {
jreviews.favorite.remove(this,{listing_id:2655});
});
Using inline JavaScript is not recommended, but anyway you can use a condition here to make sure you added this to favorite before or not. Something like this:
<img width="38" height="39" onclick="if(!jreview.favorite.exist(this)){jreviews.favorite.add(this,{listing_id:2655})}else{jreviews.favorite.remove(this,{listing_id:2655})}" class="imgFavoriteAdd" alt="Add to favorites" id="jr_favoriteImg2655" src="http://kingdomshopper.com/templates/jreviews_overrides/views/themes/default/theme_images/fav_add.png">
I'm not familiar with your API and exist is just an example
I'm looking for a more elegant way to make a hide/show of divs using inline Javascript.
If you mouse over the orangish/yellow circle logos over the cars the tag should appear. When moused out they should disappear.
URL:
http://174.120.239.48/~peakperf/
<div class="second">
<div id="speech2" style="display: none">
<img src="<?php bloginfo('template_url'); ?>/images/speech2.png" width="334" height="50">
</div>
<a id="various2" href="#inline2,javascript:HideContent('speech1')" title="" onmouseover="HideContent('speech1'); return true;">
<img src="<?php bloginfo('template_url'); ?>/images/clicker.png" width="62" height="50" onmouseover="document.getElementById('speech2').style.display = 'block'" onmouseout="document.getElementById('speech2').style.display = 'none'">
</a>
</div>
Here's the pastebin of the code used:
http://pastebin.com/JsW6eJRZ
The more elegant solution is to utilize JQuery.
Once you include the library into a file, a div show is done using the following selector
$('#idOfDiv').show();
Or if there are no ids but rather classes
$('.ClassName').show();
Now instead of having onclick events in the html as you have right now, you just bind them in jquery in the ready() method like so:
$(document).ready(function()
{
$('#idOfDiv').bind('click', function()
{
//do work here in this anonymous callback function
});
});
All of this can be done in a external js file so that will significantly clean up your html code
and put all your javascript logic into one location.
EDIT:
Example applied to your situation
$(document).ready(function()
{
$('#various1').mouseover(function()
{
$('#speech1').show();
});
$('#various1').mouseout(function()
{
$('#speech1').hide();
});
});
If you get crafty and utilize a for loop then you could just append the number to the end of the string that represents the selectors like so
$(document).ready(function()
{
for(var i = 1; i < 7; i++)
{
$('#various' + i).mouseover(function()
{
$('#speech' + i).show();
});
$('#various' + i).mouseout(function()
{
$('#speech' + i).hide();
});
}
});
The mouseout and mouseover functions are just the explicit version of using like so
$('selector').bind('mouseover', function()
{
});
$('selector').bind('mouseout', function()
{
});
Have you looked into using jQuery for this? Also, why does the code need to be inlined?
I would recommend doing something like this: http://jsfiddle.net/4N9ym/2/
Note that I have things inverted here (you would probably want to animate in instead of animating out).