I am currently working on a school project and one of my functions is not running, onclick. I dont know why. I know its the function because i added a console.log() command.
HTML:
<div id="popup">
<div id="contain">
<div id="advert">close</div>
</div>
<div id="block"></div>
</div>
JS:
function close(){
console.log("worked");
$("#popup").hide();
};
function closePopup(){
console.log("worked");
$("#popup").hide();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup">
<div id="contain">
<div id="advert">close</div>
</div>
<div id="block"></div>
</div>
Your code didn't work because, close is an inbuilt function. Changing the name of the function do the trick.
You named your function close, which is reserved for window.close() and that is why it is not working. Just name it to something else and it will work :D cheers!
Related
I am using below code for onclick popup, but I need the same popup for onload - how can I solve this problem?
<div class="app">
<div class="canvas">
Demo — Explode Modal
</div>
</div>
<div id="explode" class="ui--modal explode">
<div>
clear
<h4>Boooooom!!!</h4>
<img src="assets/img/e2dshop.jpg" >
<!--close-->
</div>
<div class="bg">
<img src="assets/img/explode-med.gif" id="boooom">
</div>
</div>
Try this solution
<script>
jQuery('window').on('load', function(){
jQuery('#boooom').attr('src', 'assets/img/explode-med.gif');
});
</script>
As well include jQuery lib.
Try this
$(document).ready(function() {
$(".ui--button").click();
});
Click works just on first div with id plus but other divs with the same id dont work. I dont know whats the problem... I dont get what the problem is. Please help. Thanks!
Here is the code...
Edited:
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="41">Good</div>
<div class="minus" glas="41">Bad</div>
</div>
<div id="referenceInfo">
01:40 PM 06.09.2014.
</div>
</div>
</div>
<div id="detailReference">
dodaj
<div id="refVote">
<div class="plus" glas="37">Good</div>
<div class="minus" glas="37">Bad</div>
</div>
<div id="referenceInfo">
01:38 PM 06.09.2014.
</div>
</div>
</div>
JavaScript
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
});
IDs should be unique. use same class instead of ids.Like this:
<div class="plus" glas="37">Good</div>
and then use:
$(".plus").click( function() {
var ref=$(this).attr("glas");
alert(ref);
$.ajax({
url:"url is ok",
success:function(){
}
}
);
$(".plus").click(...)
not
$("#plus").click(...)
There can and shall only be one item with a certain ID on the page. Use classes on those buttons instead.
Couple of issues. You have mismatched divs. This last div looks like its the culprit.
<div id="details">
<div id="detailHeader">
<div id="facultyTitle">sadasdas</div>
<div id="title">dsadasdasdas</div>
</div> <--this one
Your second issue is that you shouldnt have multiple ids that are the same on a page. Instead set it as a class with
<div class="plus"> Then reference them in jquery with
$(".plus").click( function()
I have to use class if you have more than one div. Try with .plus
I'm newbie in Jquery, how to make a function but select different div (Like php class)?
This is my code:
$(document).ready(function(){
$("#box-1").hover(function(){
$("#mebox-1").removeClass("hide");
$("#circle-1").addClass("hide");
});
$("#box-1").mouseleave(function(){
$("#mebox-1").addClass("hide");
$("#circle-1").removeClass("hide");
});
});
And I want to use this function for box-xxx. This is my HTML cod sample:
<div id="box-1" class="box">
<div id="circle-1" class="circle"></div>
<div id="mebox-1" class="hide circle-bg">
test
</div>
</div>
<div id="box-2" class="box">
<div id="circle-2" class="circle"></div>
<div id="mebox-2" class="hide circle-bg">
test
</div>
</div>
<div id="box-3" class="box">
<div id="circle-3" class="circle"></div>
<div id="mebox-3" class="hide circle-bg">
test
</div>
</div>
Try to use that common classes attached with those elements, And most importantly use the this reference so that we can target the elements inside the element over which we are moving.
$(".box").hover(function(){
$(".circle-bg",this).removeClass("hide");
$(".circle",this).addClass("hide");
},function(){
$(".circle-bg",this).addClass("hide");
$(".circle",this).removeClass("hide");
});
DEMO
As you have already defined common classes. You should use .find() to get the descendants.
Use
$(".box").hover(function(){
$(this).find(".circle-bg").removeClass("hide");
$(this).(".circle").addClass("hide");
},function(){
$(this).find(".circle-bg").addClass("hide");
$(this).find(".circle").removeClass("hide");
});
Also I have passed the mouseleave event handler as second argument to .hover() function.
Try with this:
var n="";
$('[id^="box-"]').hover(function(){
n = this.id.split('-')[1];
$("#mebox-"+n).removeClass("hide");
$("#circle-"+n).addClass("hide");
},function(){
$("#mebox-"+n).addClass("hide");
$("#circle-"+n).removeClass("hide");
});
fiddle
I need to add a class to a div inside a shadowbox and I am using jQuery to do this.
jQuery("#all_records #"+id).addClass("selectedDiv");
In such circumstances, I usually check if I am calling the right div, and in this case it turns out I am. But unfortunately, it is never adding the class to the div.
<div id="all_records">
<div id="50157186" class="records_dealer_activation" onclick="select_customer(50157186);">
</div>
</div>
function select_customer(id){
jQuery('#sb-player #choosen_customer_activation_duplicate').prepend('<div class="overlay"> <div class="modalprogress"> <div class="theprogress"> <img class="image_load" src="<?php echo base_url();?>images/progress_bar.gif" alt="loadanimation" /></div> </div> </div> ');
jQuery("#sb-player #choosen_customer_activation_duplicate").load("<?php echo site_url().'/'.$main_controller;?>"+"/load_show_selected_customer_activation/?customerID="+id+"&type=duplicate");
if(jQuery("#all_records > div").hasClass("selectedDiv"))
{
//THIS IS WORKING
jQuery("#all_records > div").removeClass("selectedDiv");
}
//NOT WORKING
//alert(jQuery("#sb-player #all_records #"+id).html());
//document.getElementById(id).className += "selectedDiv";
jQuery("#all_records #"+id).addClass("selectedDiv");
}
Any suggestions?
Can you post your javacript function, btw this work for me:
<script type="text/javascript">
function select_customer(id){
jQuery("#" +id).addClass("selectedDiv");
}
</script>
<div id="all_records">
<div id="50157186" class="records_dealer_activation" onclick="select_customer(50157186);">
Click me
</div>
</div>
I'm trying to test loading an AJAX response on jsfiddle.net and cant seem to figure out how to do it.
I'm calling .load('/echo/html') but I'm not sure how to pass in the data?
refer this jsfiddle
JS:
$(function() {
$("div.post-big").hide();
$("div.expand").click(function() {
$(this).parent().hide();
$(this).parents('.post').load('/echo/html/');
});
});
Supporting HTML:
<div class="post">
<div class="post-small">
<div>Title</div>
<div>Content</div>
<div class="expand">expand</div>
</div>
<div class="post-big"></div>
</div>
<div class="post">
<div class="post-small">
<div>Title</div>
<div>Content</div>
<div class="expand">expand</div>
</div>
<div class="post-big"></div>
</div>
<div class="post">
<div class="post-small">
<div>Title</div>
<div>Content</div>
<div class="expand">expand</div>
</div>
<div class="post-big"></div>
</div>
Supporting CSS:
.post {
border: 1px solid #911;
margin: 5px;
}
You need to supply a second argument to the .load method, with an html property.
.load('/echo/html/', { html: 'Hello!' });
See the working example at jsfiddle
In this demo, click on the text that says expand to trigger the load.
the best thing that you can do is find an object where you want to attach code that simply trigger the function for the ajax call. like for instance
$('button').click(function(){
//do your ajax call here
});