Develop Reference

How to trigger data-* event in JQuery/JS?

I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.

Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});

Hide div class on page load

Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.
UPDATE:
html
<script>
document.write('<div class="js">');
</script>
<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<script>
document.write('</div>');
</script>
My JS code (without hide function):
$('.button').click(function(){
$('#modal').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close,.modal-bg').click(function(){
$('.modal-bg').fadeOut();
$('#modal').fadeOut();
return false;
});
Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form.
(ISSUE FIXED)
here is the codepen (live version): http://codepen.io/mariomez/pen/WbgrNK

You don't need the signup div at all - I think it complicates things. Just start your modal background hidden so before your button click code add this:
$('.modal-bg').css('display','none');
Example
Update
to stop your form showing up whilst your page loads I would add a js div:
after your body opening tag:
<script>
document.write('<div class="js">');
</script>
before your body closing tag:
<script>
document.write('</div>');
</script>
This allows you to apply js only style, in this case for the modal-bg:
.js .modal-bg {display:none;}
and then you can remove the above js to hide the modal as it will be now in your css
updated codepen

You hide the "signup" Div but try to restore the "modal" div
This works:
$('.button').click(function(){
$('#signup').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close').click(function(){
$('.modal-bg').fadeOut();
$('#signup').toggle();
return false;
});

You are looking for a div with the id "signup", but that is the class name.
$(function() {
$(".signup").hide();
});
Will hide the signup div when the page loads.
You could then use $(".signup").toggle(); on the button click event.
If you combine these, e.g.
$(function() {
$(".signup").hide();
$(".button").click(function() {
$(".signup").toggle();
});
});
Then the button displays the signup block correctly, and it is hidden on page load.

Here is the jQuery to change the CSS on page load:
$('.signup').css({
'display': 'none'
});

First method (CSS) - CodePen
#signup {
display: none;
}
Second method (jQuery) - CodePen
$('#signup').hide();

Looks like you already figured it out in your codepen paste? That code is different from your post...
Anyway, you have 3 layers of divs in your Login dialog:
#signup > modal-bg > modal
So if you want to hide #signup after loading the page:
$(function() {
$("#signup").hide();
});
then you also need to show/hide #signup in your button events.
.modal-bg and #modal are child elements of #signup, so if you remain #signup in hidden, .modal-bg and #modal will always be hidden no matter what you do on them.
By the way, I suggest you to use FireBug or general developer tools (hit F12 in chrome/IE/FIrefox) to inspect HTML elements and check what goes wrong, at least that's how I found the problem in your code.

how do I use onClick, load, show to load div

I have been trying out JS to make a button switch, show, hide text.
I have two buttons, register and login. When login is clicked, register will hide, vice versa.
Here is the link to my jsfiddle
The code here..
HTML
<button id="btn1">Login</button>
<button id="btn2">Sign Up</button>
<div id="login">
<h4>Login</h4>
</div>
<div id="register">
<h4>Register</h4>
</div>
JS
$("#btn2").on('click', function() {
$("#register").show();
$("#login").hide();
});
$("#btn1").on('click', function() {
$("#login").show();
$("#register").hide();
});
CSS
#register {
display: none;
}
It seems to not be working.. Register is display as none as I want to make login show up as default.

You need to include jQuery first before using it.
It can be included under "Framework and extensions"
Updated Fiddle

jQuery toggle on different area

I am trying to copy the Like button of Facebook, but the problem is on the specific place to click to change the button.
When it's not yet liked, the user should click anywhere on the button and the button will change on the gray state (already liked). This is already done.
But the problem is when unliking it, I think I'm not using jquery correctly so that it should set to the blue state(not liked), only if it is clicked on the image.
Here's what I've made, take a look at it so you can understand better: https://glenrdsgn.com/button/

I've added a class '.unlike' to the ch2 div so that the HTML looks like this:
<div id="like" >
<div id="ch1" class="btn btn-empty no-like">
<div class="pad">
<div class="like-text">
<div id="ch2" class="data-empty"></div>
<div class="txt">Like</div>
</div>
</div>
</div>
</div>
Then the following jQuery does what I think you mean:
$(function() {
$('.btn').live('click', function() {
$('#ch1').attr('class', 'btn like btn-fill');
$('#ch2').attr('class', 'unlike data-fill');
});
$('.unlike').live('click', function() {
$('#ch1').attr('class', 'btn btn-empty no-like');
$('#ch2').attr('class', 'data-empty');
return false;
});
});
The return false is needed as otherwise both events are triggered. Hope this helps

isolate the action of a button from the action of it's div

i have a div in my project and on this div a button that has an action of sliding the div down but the div itself has an action onclick to slide itself up
the problem here is that when i click the button the action of the button is done that the div slide down but also the action of the div is fired and slide up again coz the button is a part of it
i hope that i give you the point
here is some code
<div id='container' onclick='slideup()'>
<button onclick='slidedown()'>click</button>
</div>
which slideup and slidedown are functions added by my in javascript

Add return false to function slidedown
<div id='container' onclick='slideup()'>
<button onclick='slidedown()'>click</button>
</div>
function slidedown(){
...
...
return false;
}
since you tagged your question jQuery, why don't you use this wonderful library?
$('#container button').click(function(){ // or use $('#button-id')...
slidedown();
return false;
});
$('#container button').click(slideup);
Updated HTML
<div id='container'>
<button >click</button> <!-- better give that button an id-->
</div>