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">
Related
I'm trying to make a small script with an if-statement: I want the condition to be, that if the class "page-title" contains "Welcome" it will add the class "excluded" to the element with the other class called "example". This is the js-code I've tried so far without luck:
<script>
$(document).ready(function(){
if(".page-title:contains('Welcome')"){
document.getElementsByClassName("example").addClass("excluded");
}
else{
}
});
</script>
here is a simple fix with js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<h1 class="page-title">Welcome</h1>
<div class="example"> Example sample div</div>
<script type="text/javascript">
$(document).ready(function(){
if($('.page-title').text() == 'Welcome') {
$('.example').addClass('excluded');
}else{
// code here
}
});
</script>
You can implement that by selecting container with your class with jQuery, using text() method on it and trying to find "Welcome" in it. Try below code:
if($('.page-title').text().includes('Welcome')) {
// your code here
}
$(document).ready(function(){
if($('.page-title').text().indexOf('Welcome')){
$(".example").addClass("excluded");
}
});
You will need to decide which container/element you wish to add the 'excluded' class to, if you're finding that by using a class, you would write: $(".class-name-of-element-here").addClass("excluded"); or with an ID: $("#id_of_element_here").addClass("excluded");
Notice when searching for a container or element by ID, we use # and a class with .
Any example of this is: $('.page-title') you're looking for any element on the page with a class of page-title
When you're using addClass, you do not need to specify the . as a prefix, because we are specifically looking for a class.
There was 2 problems:
1: document.getElementsByClassName("example").addClass("excluded"); is a mix of javascript and jQuery.
javascript way: document.getElementsByClassName("example").classList.add("excluded");
jQuery way: $(".example").addClass("excluded");
2: if(".page-title:contains('Welcome')"){ is a valid if statement. use if ($(".page-title:contains('Welcome')")) {
$(document).ready(function() {
if ($(".page-title:contains('Welcome')")) {
$(".example").addClass("excluded");
} else {
}
});
$(document).ready(function() {
if ($(".page-title:contains('Welcome')")) {
$(".example").addClass("excluded");
} else {
}
});
.example.excluded {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-title">Welcome to the world</div>
<div class="example">Is this excluded</div>
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");
I am using following coding in a external js file
$( document ).ready(function() {
var elem='<img class="imgload" src="/common/images/spinLoader/transperent.png">';
$('.imgchange').append(elem);
});
$(function(){
$('.hid').click(function(){
$('.imgload').attr('src',"/common/images/spinLoader/loader_icon.gif");
var link = $(this);
if(link.hasClass('disabled'))
{
return false;
}
else
{
link.addClass('disabled');
}
});
});
In the HTML
<td><a class="hid" href="somelink.jsp"></a></td><td class="imgchange"></td>
The whole set up is to disable the link and display spinning loading icon after user clicks the link.
The problem is i firefox 38.0.1 the link is disabled but the image doesn't change to loading icon at first click. IF i click another time only the image is changing.
I checked with the debugger, when i run through the debugger the image is changing at the first click.
I tried putting the onclick function inside the $( document ).ready() it doesn't worked.
FYI: It is working without problem in Chrome Version - 43.0.2357.65 m and IE 11.
Your HTML element is not correctly formatted, the "" should move inside the "" scope, and the "" should be "", maybe this is the problem.
I tried to reproduce your issue using:
firefox 38.0.1-1 (linux machine).
I got it working as you want to, So I don't know where is your problem comming. I can suggest a little change that maybe is causing the issue:
<td><a class="hid" href="somelink.jsp"></a></td><td class="imgchange"></td>
Removing the href, cause it makes no sense for me to use .click() function on element that has it owns function (HTML).
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.imgchange{ width: 100px; height: auto; }
</style>
</head>
<body>
<table>
<tr><td><a class="hid" onclick="myFunction('link2.html');">Click me!</a></td><td class="imgchange"></td></tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
var elem = '<img class="imgload" src="http://m.mexicodesconocido.com.mx/images/lazy-thumb.gif">';
$('.imgchange').append(elem);
});
function myFunction(link){
$('.imgload').attr('src',"http://www.deckers.com/wp-content/plugins/simplemap/inc/images/loading.gif");
if($(this).hasClass('disabled'))
{
return false;
}
else
{
$(this).addClass('disabled');
}
location.href = link;
}
</script>
</body>
</html>
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();
}
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).