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();
});
Related
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!
I am trying create drop zones programmatically, but it doesn't work.
HTML Code:
<div class="content-wrap">
<div class="row">
<script type="text/javascript">
$(function() {
$("div#myDropZone").dropzone({
url : "/file-upload"
});
});
</script>
<div class="col-sm-12">
<div class="nest" id="DropZoneClose">
<div class="title-alt">
<h6>DropZone</h6>
</div>
<div class="body-nest" id="DropZone">
<div id="myDropZone" >
</div>
<button style="margin-top: 10px;" class="btn btn-info"
id="submit-all">Submit all files</button>
</div>
</div>
</div>
</div>
</div>
The drop zone in <div id="myDropZone"> not appers!
best regards :)
You need to give your #myDropZone div some width and height so that it takes up space. Heres a jsfiddle.
Alternatively, you can add the dropzone class to your div to get the default styling that you see in the demos. Heres the jsfiddle for that.
Add class dropzone to the div element which holds your drop zone.
Hope that you have added the dropzone stylesheet to your page.
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>
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>
EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.
For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.
Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;