How would I create a Toggle button with snap.js found here https://github.com/jakiestfu/Snap.js the usage section is very brief and I don't understand. Here is some code I came up with. I am new to javascript and any help is appreciated.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
You need to get the button element before adding click listener on it. Also, markup for id attribute is wrong on the button.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
// Get the button
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
EDIT: Updated the answer to use document.getElementById rather than jQuery.
It looks like there's an error in your JavaScript (unless you've omitted some code.)
var snapper = new Snap({
element: document.getElementById('content')
});
// you need to grab a reference to this node before you can add the event listener
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
addEvent(document.getElementById('toggleButton'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
Related
<div class="circle done">
<span class="label">1</span>
my code is above
I want to change 1 into a tick if div has "done" class
How do I do that ?
$(document).ready(function() {
$(".done span.label").html("your tick html");
});
Use this on your body tag:
<body onLoad="tick()">
And add this in your javascript
function tick(){
var labeltext = $('.label').val();
if (labeltext == "1"){
$('.done').text("✓");
}else{}
};
$( document ).ready(function() {
console.log( "ready!" );
const el = $(".circle");
if (el.hasClass('done')) {
$( "span.label" ).html('done');
}
});
This is done with jQuery, you first wait for the DOM to load, once it has. Then check if 'done' class is applied to the element if it is then change content of the span tag.
This should do it...
$(document).ready(function (){
$(".done").next("span").html("✔");
}
);
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
Hi guys i have this jquery code which i searched on the net. im new to jquery. the code need to click the button to execute. my question is how is the code to execute this jquery on page load.
<button id="notification-trigger" class="progress-button">
<span class="content">Show Notification</span>
<span class="progress"></span>
</button>
<script>
(function() {
var bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
bttn.addEventListener( 'click', function() {
// simulate loading (for demo purposes only)
classie.add( bttn, 'active' );
setTimeout( function() {
classie.remove( bttn, 'active' );
// create the notification
var notification = new NotificationFx({
message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content"><p>Welcome, Nixxx!</p></div>',
layout : 'other',
ttl : 6000,
effect : 'thumbslider',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
} );
})();
</script>
i want something like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
please help thanks!
(Edited i include the button that needs to click before the script execute.) i want this code to execute everytime i load/refresh the page and not by clicking the button. thanks for the help!
Please use the following code. It works the same as the onload() function of Vanilla Javascript.
<script>
// $(function(){}); Wrapper acts as the document.ready of vanilla javascript
$(function(){
//call myfunction() onload;
myFunction();
//functions to execute goes in here
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
//call button action instead of click
btnFunction();
}
var bttn = document.getElementById( 'notification-trigger' );
bttn.disabled = false;
function btnFunction() {
classie.add( bttn, 'active' );
setTimeout( function() {
classie.remove( bttn, 'active' );
var notification = new NotificationFx({
message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content"> <p>Welcome, Nikko Zabala!</p></div>',
layout : 'other',
ttl : 6000,
effect : 'thumbslider',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
notification.show();
}, 1200 );
};
});
</script>
use :
<script>
$(document).ready(function(){
myFunction()
// put your code here;
});
function myFunction() {
// your code
}
function btnFunction(){
// your code
}
</script>
I have this piece of code in my page
<body onmouseup="fun()">
.......
.......
<button id="ele">Exclude</button>
</body>
How can i achieve something like this
function fun()
{
if(MOUSE RELEASE IS ON TOP OF BUTTON #ele)
{
console.log('Mouse released on top of the button');
}
else
{
console.log('Mouse released');
}
}
If you're using jQuery I would suggest using .on() to bind events. You can use the event.target element to see if it was the button.
$(document).ready(function(){
$('body').on('mouseup', fun);
function fun(event){
if($(event.target).is('#ele')){
console.log('Mouse released on top of the button');
}else{
console.log('Mouse released');
}
}
});
Use event.stopPropagation, like this:
html
<button id="ele">Exclude</button>
<br>
<br>
<div>fun</div>
js
document.body.onmouseup = function(){ fun(); };
function fun(){
console.log("fun");
}
var el = document.getElementById("ele");
el.onmouseup = function(e){ e.stopPropagation(); };
demo: http://jsfiddle.net/GgKsQ/
and here is a demo using jQuery's mouseup: http://jsfiddle.net/GgKsQ/1/
This is an orthodox code it gives you what you required.
please copy into your editor and check.
<!DOCTYPE html>
<html>
<body onmouseup="fun()">
The content of the body element is displayed in your browser.
<br/><br/><br/><br/><br/><br/><br/><br/>
<div id="Exclude" onmousedown="fun2()"> Exclude Me Please </div>
</body>
<script>
var idPressed = 0;
function fun() {
if (idPressed == 0)
console.log('Mouse released');
idPressed = 0;
//alert("Whatever "+this.id);
}
function fun2() {
idPressed = 1;
console.log('Mouse released 2');
//alert("Whatever 2"+this.id);
}
</script>
</html>
I’m using the following jQuery for hiding and showing content (toggle), as a tree navigation menu in my website. I found this code extremely useful because by clicking, it displays only one div at a time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
The problem is that I can close a div only by opening another div.
How to close the div by a second click on it?
You can use slideToggle, change from slideDown to slideToggle:
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideToggle(200); // instead of slideDown
}
else {
$(this).slideUp(600);
}
});
}
First of all, don't use inline event handlers.
<script type="text/javascript">
$(document).ready(function() {
var boxes = $('.city_div');
$('.city-toggle').click(function(e) {
var box = $(this).next();
var isHidden = box.is(':hidden');
boxes.slideUp(600);
if(isHidden) {
box.slideDown(200);
}
e.preventDefault();
});
});
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North
<div class="city_div" id="box01">Div #01</div>
Centre
<div class="city_div" id="box02">Div #02</div>
South
<div class="city_div" id="box03">Div #03</div>
Also, if your links don't go anywhere meaningful, use # as the href and make sure the boxes are visible by default. (Hide them using boxes.hide(); right at the start.)
Also also, <br> isn't what you should use there. <div>s are already block-level elements. If you want more padding, give them a top margin.
try this:
$(document).ready(function(){
$('.city_div').click(function(){
$(this).hide(); //or whatever code you want to hide it
});
});
that way when you click on a div, it will hide it.
Since you are using jQuery you could try using the jQuery.toggle function.
function show_region(chosen_region) {
$('#' + chosen_region).toggle('slide');
return false;
}
Keep track of the div you have clicked last:
var globalLastClickedButtonId;
$("div.city_div").click(function() {
if (globalLastClickedButtonId == $(this).attr("id")) {
$(this).hide();
} else {
var box = $(this).next().next();
var clickedId = $(this).attr("id");
$("div.city_div").each(function() {
if ($(this).attr("id") == clickedId)
box.slideDown(200);
else
box.slideUp(600);
}
}
globalLastClickedButtonId = $(this).attr("id");
});
First, why are you using such an old version of jQuery?
Second, your JavaScript can be simplified. jQuery works on sets; you don't need the .each, or loops.
Here is a working example: http://jsfiddle.net/gibble/25P9z/
Simplified HTML:
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
New JavaScript:
function show_region(e) {
var $target = $(e.target);
var chosen_region = $target.attr('data-contentDiv');
var openDiv = $('#' + chosen_region);
openDiv.slideDown(200);
$('.city_div').not(openDiv).slideUp(600);
}
Last, attach events, don't inline them in your HTML.
$('a[data-contentDiv]').click(show_region);
Because you are using an animation it is best to keep track of the div that is currently shown. If you don't, then you will start to see multiple divs showing if you click links in quick succession.
You can use this:
$(function() {
$("a").click(function(e) {
e.preventDefault();
var selectedDiv = $("#" + $(this).attr("href"));
var hide = selectedDiv.data("shown");
$(".city_div").slideUp(600);
$(".city_div").data("shown", false);
if (hide) {
selectedDiv.data("shown", false);
}
else {
selectedDiv.data("shown", true);
selectedDiv.slideDown(200);
}
});
});
Here is a working example
You should keep a variable with your old chosen region name
<script type="text/javascript">
var old_chosen_region="";
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if (($(this).attr("id") == chosen_region)&&(chosen_region!=old_chosen_region)) {
$(this).slideDown(200);
old_chosen_region=chosen_region;
} else {
$(this).slideUp(600);
}
}
old_chosen_region='';
});
</script>
This allows you to 'remember' which region you chose last and, if the chosen one equals the last you close it.
You should set old_chosen_region='' in the end to let the tab reopen.