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
Related
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
}
});
});
I have an alert box with multiple close buttons:
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
I registered a handler for the close event as the docs suggest:
$(document).on('close.fndtn.alert', function(event) {
console.info('An alert box has been closed!');
console.info(event);
});
But unless I've missed it, the event doesn't seem to indicate which of the buttons was clicked.
How should I modify my HTML/JS to find out which of the close buttons was clicked? I don't want to modify Foundation's own JS, and I do want the UI behavior to remain consistent for both buttons, nice transitions and all.
Here is working spinet as #Panomosh mentioned above:
$('a.close').on('click',function(e){
console.log($(e.target).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
Greetings!
Rather new to javascript, jquery and bootstrap, etc., so bear with me. I have a situation where I want to present a list of errors in a model dialog after the user hits a "validate" button. Got all the working - I am generating a list of objects that indicate to the user they need more work to the exact spot that needs additional data entry. I have the the DIV "id" that represents the field that needs more data (and each item will jump someplace different).I do not want a drop down list since there are be lots and lots of these items.
A few questions:
How do I go about jumping from the modal to the main html. I believe I have seen scrollIntoView mentioned in a few other posts as I was looking but will that hop to the DIV and also close the modal?
What construct should I use for the list? A list of scrolling button? The size of this can be quite large (hundreds) so it will need a scroll capability.
Finally, the app is "paged" with a next and prev buttons. I assume that will not be a problem from the aspect of jumping to a page not already displayed?
Here is the current modal code:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="message-container">
<div class="header">
Validation Errors
</div>
<div class="message">
The following fields are required:
</div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
</script>
and
showValidationError: function (fieldlist) {
settings.focusedField = $(':focus');
$("#validationErrorModal").detach();
$(".device-container").append(templates.validationerror({ fieldlist }));
$(".message-container input").focus();
},
validationErrorOk: function () {
$("#validationErrorModal").detach();
if (settings.focusedField) {
settings.focusedField.focus();
}
},
The field list is a list of objects that contain the id (field.id) of the DIV and also a description (field.fieldName) that I want to display.
Here is something I mocked up in paint...I am not sold on it but it show in a general sense what I am looking for:
I don't need a full solution rather, just want mechanisms I can use.
UPDATE
Just to help out anyone else in the future, using the info provided in the correct answer below I have a new code as follows:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="validation-container">
<div class="header" align="center">
Validation Errors
</div>
<div class="message">
<div class="scrolling-container" style="background-color: rgb(238, 238, 238); height:660px">
<div class="grid grid-pad">
{{#each fieldlist}}
<div class="row click-row" onclick="fffdevice.validationErrorFix('{{id}}');">
<div class="col-7-8 field-name">{{fieldName}}</div>
<div class="col-1-8">
<img class="pull-right" src="/mysite/Content/device/images/fix.png" style="width: 40px; position:relative; top: -5px;">
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div><br/></div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
Then the Javascript for the onClick is:
validationErrorFix: function (id) {
$("#validationErrorModal").detach();
var x = document.getElementById(id);
x.scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
},
Which closes the dialog and jumps to the field. It looks like (I know this is ugly and I will clean it up later):
Bind the modal event to the validation code and show the modal if error(s) are found.
Display the modal with the list of errors using an html unordered list, inside the li element an anchor tag where the href attribute will have a value with the id that corresponds to the input field, all this done dynamically from your validation code.
Once an error in the list is clicked hide the modal using bootstrap $('#your-error-modal').modal('hide'); so the code would be something like this:
$('#your-error-modal').on('click', 'a.error-item', function(){
$('#your-error-modal').modal('hide');
});
I haven't tested this code, but if you're having issues with scrolling to the section of the input and closing the modal you can probably do something like this too:
$('#your-error-modal').on('click', 'a.error-item', function(e){ // use this method of onclick because your list will be created dynamically
e.preventDefault(); // prevent the default anchor tag action
var href = $(this).attr('href'); // grab the href value
$('#your-error-modal').modal('hide'); // close the modal first
scrollToDiv(href); // then take the user to the div with error with a nice smooth scroll animation
});
function scrollToDiv(location) {
$('html, body').animate({
scrollTop: $(location).offset().top
}, 2000);
}
Again this is untested code, but the idea is there.
For UX reasons you might also want to create a floating div or something where users can click on it and go back to the modal to continue reading your list of errors.
I want to toggle visibility of certain div on click of button. My HTML looks like follow
<div id="button">
<button> button </button>
</div>
<div id="somedata" class="hidden">
<label> some data</label>
</div>
Corresponding JQuery code is
$("#button").click( function() {
$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");
});
This works perfectly except for the first time you click the button.
When you click on the button first time, it just appears and dis-appears immediately.
I really need to make that div hidden by default.
Check this link for demo :
JSFiddle link
Thanks in advance,
Regards,
Ganesh
The hidden class in Bootstrap includes visibility: hidden which is what is causing the issue. Set the element to display: none only and it works:
#somedata {
display: none;
}
$("#button").click(function () {
$("#somedata").fadeToggle("slide");
});
Updated fiddle
To start as hidden : swap 2 lines
$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");
To
$("#somedata").fadeToggle("slide");
$("#somedata").removeClass("hidden");
You can use the .toggle() function and it will get the job done.
<div id="button">
<button> button </button>
</div>
<div id="somedata">
<label> some data</label>
</div>
<script>
$("#button").click(function () {
$("#somedata").toggle(500); //animation in milliseconds
});
</script>
What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}
onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}