I've checked some other threads but can't seem to find a response that goes with my code. My issue is my click event only fires on the second click, at which point it works perfectly (second click opens, third click closes, fourth opens, etc...)
$('.expand-btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.expand-wrapper').animate({
right: "0"
}, 500, function() {
});
} else {
$('.expand-wrapper').animate({
right: "-325px"
}, 500, function() {
});
}
$(this).data('clicks', !clicks);
});
EDIT: Here is my HTML code. It works like this jquery plugin where .expand-wrapper is the contact form which is hidden off screen and .expand-btn is the little flap that is on the side of the screen and clickable.
<div class="expand-wrapper">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Contact
<div class="expand-form">
<?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?>
</div>
</div>
This sounds like an issue where your data-clicks attribute isn't initialized on your element (as you are setting it at the end of your first click and then it appears to work as expected).
Try initializing it on your .expand-btn element as follows :
<a href="#" class="expand-btn" data-clicks='false'>...</a>
Or if you have multiple expand button elements, you can initialize them when your page is loaded using jQuery :
$(function(){
$('.expand-btn').data('clicks',false);
});
Related
I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});
I have a button:
<button type="button" class="btn btn-sm btn-primary" data-bind="attr: { 'data-target': '#MoreOptions' + Provider() }" data-toggle="collapse">More Options</button>
That controls when this div is open or closed to show 'more options'.
<div class="panel-collapse" data-bind="attr: { id: 'MoreOptions' + Provider() }, css: { collapse: $root.IsCollapsed }">---</div>
And I use a Knockout.js observable to keep it open when the data refreshes inside the div. I don't want a data refresh to collapse the div. The issue is when I do this and keep the div open, the button thinks that the div is closed. So the next time the user clicks the button, the div closes real quick and opens back up again, requiring two clicks on the button to get the div to close.
The expected behavior is to keep the div open during a data refresh, but have the button know that the div is open and close it with just one click.
I've set the CSS collapse with knockout in the div and I'm looking for a similar way to set the button for it to know that the div is not collapsed.
I've noticed that when the button is clicked to expand the div, the aria-expanded attribute is set to true where it didn't exist when the button is initially rendered; and when the button is clicked to collapse the div, the CSS property 'collapsed' is added to the button. I've played around with adding and changing these via knockout with no success.
It should be noted that the button is refreshed with the data.
I've decided to remove the bootstrap toggle button functionality and just go with the jQuery toggle in combination with knockout. The jQuery way just offers more control.
<button type="button" class="btn btn-sm btn-primary"
data-bind="click: $root.ChangeMoreOptions">
More Options
</button>
<div id="MoreOptionsDiv" style="padding-top: 10px; display: none;">
--- content ---
</div>
Knockout:
//Open or close div
self.ChangeMoreOptions = function () {
if (self.IsCollapsed() === true) {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(false);
} else {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(true);
}
}
//Keep div open on refresh if it is already open
//Search for 'none' in the style display: none
self.FixMoreOptions = function () {
if (($('#MoreOptionsDiv').attr('style').search('none') > -1)
&& (self.IsCollapsed() === false)) {
//Toggle closed div back to open
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
}
}
Hello I would like to disable all other links except the clicked one after I click one of the links.
Here is my code so far:
JavaScript
$(".link-chart").click(function($e) {
if($(this).find(".link-selector-two").hasClass('red')) {
$('.link-selector-two', this).addClass('cssclass');
$('.link-selector-one', this).addClass('cssclass');
} else {
$('.link-selector-two', this).removeClass('cssclass');
}
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="link-chart lx-link-chart">
<div class="link-selector-one">
<div class="link-selector-two red">One</div>
</div>
</a>
<a href="#" class="link-chart lx-link-chart">
<div class="link-selector-one">
<div class="link-selector-two red">Two</div>
</div>
</a>
So the idea is for example if I click the first link to disable the second one, if I click again the first link it will deselect the first link in the way it is working now so the second link will be available for selection again. The same option is for the second link if I click the second to disable the first one.
Any help will be welcome to let me know in which approach have to go.
You could do something like this:
JS
var $linkChart = $('.link-chart');
$linkChart.click(function(e) {
$linkChart.each(function() {
if (e.currentTarget !== this) {
$(this).toggleClass('disabled');
}
});
});
SCSS
.link-chart {
&.disabled {
pointer-events: none;
opacity: 0.25;
}
}
Here's a fiddle to show it in action. FYI, I added a third link so that you could see it'll work exactly the same for as many links as you want to add.
I looked around and tried many different options to get this working but somehow I cant find a solution.
I have a boostrap popover window that will load() external url.
Everything works OK when I click the popup button first time but once I close the popover, the query function will not reload on click once the window has been closed.
Ideally, the popover window will be reloaded with fresh data every time the popover is called by a click.
my button:
<a class="btn btn-default btn-sm pop-class"
data-container="body"
data-toggle="popover"
data-placement="left"
id="{{ instance.id }}"></a>
Here is my script
$('.pop-class').popover({
html: true,
title: function() {
return $("#my-head").html();
},
content: function() {
$('#hidden-input').val(this.id);
var id = this.id + '#container';
return $( "#my-content" ).load( "/mypage/"+id );
}
});
Update:
Scenario:
This app has an external html form that the user can load as needed. As this form is dynamic and will allow the user to also update current data the form is loaded on a fly with the instance data.
As the user can close the popover at any time and return back later, the load() function should always load new data based on the instance ID or load a empty form for new entries.
TOTALLY UPDATED ANSWER
If I understood you task, I offer you not to use a bootstrap (it's not that it is designed for).
There is a snippet based on JQuery Ui. (JQuery UI Dialog docs)
There is a button that opens a dialog with an <iframe> that loading some web page each time dialog opens.
If you do not need an iframe, you could load any other contents instead.
$(function () {
// Setting up the dialog
$('#dialog1').dialog({
// Hidden for now
autoOpen: false,
// Title
title: 'My External Form',
// Width in px
width: 790,
// Dialog close event handler
close: function() {
// Looking for an iframe inside it
$(this).find('iframe').
// Clearing its contents
attr('src', 'about:blank');
}
});
// Looking for our dialog
$('#dialog1').
// Looking for JQuery UI initialized dialog (up the DOM tree)
closest('.ui-dialog').
// Looking for dialog title (down the DOM tree)
find('.ui-dialog-title').
// Prepending the title with an Font Awesome icon
prepend('<i class="fa fa-list fa-lg grey"></i>');
// Subscribing to the click on the button
$('button.show-dialog').click(function () {
// Caching the JQuery button object
var $button = $(this);
// Getting ID of the associated dialog from 'data-dialog' attribute
var dialogId = $button.data('dialog');
// If there is an ID
if (typeof(dialogId) != 'undefined')
{
// Getting a JQuery UI dialog by ID
var $dialog = $('#' + dialogId);
// Opening the dialog
$dialog.dialog('open');
// Loading a content to the iframe
$dialog.find('iframe').attr('src', 'http://apple.com');
}
});
});
.dialog
{
display: none;
}
.ui-dialog-titlebar i.fa {
margin-right: 0.75em;
}
.ui-dialog .dialog.ui-dialog-content
{
padding: 0;
overflow: hidden;
}
.dialog iframe
{
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<div class="container">
<button class="show-dialog" data-dialog="dialog1"><i class="fa fa-arrow-left fa-lg orange">My Button</i></button>
<div class="dialog" id="dialog1">
<iframe id="dialog1-frame" name="dialog1-frame" width="100%" height="100%"></iframe>
</div>
</div>
I have a link which opens a popover, and in the popover I load content from a div.
The content is some sharethis.com buttons and the javascript which is presented by sharethis to be added to the page.
So the set up looks like this :
Button and content :
<i class="fa fa-share"></i> Share
<div id="share_this_btns" class="hidden">
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
<div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>
Popover init
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
return $('#share_this_btns').html();
},
placement : 'bottom'
});
The buttons turn up just fine and also show the count - however, they can't be clicked.
I have also tried putting the script tags outside of the content div, and removing them completely (as there is a second instance of the sharethis script, but with a different publisher ID).
Can you please advise?
EDIT//
It seems to work every now and then without me changing anything. So the scripts seem to run, maybe it is an issue with how the elements are layered?
Ok I figured it out. I cannot just load sharethis data into the popover, so what I did is this :
I added the normal tags provided by sharethis, and the reinitialised the buttons by calling stButtons.locateElements();
For that, I made a custom callback (courtesy of https://stackoverflow.com/a/14727204/1206437 ) where I call this init.
After that, however, the popover isn't positioned correctly because the width changes after the load. So I also wrote a function that resizes everything. It has to be in a setTimeout because locateElements() doesn't seem to have a callback, and so the width changes again after the numbers of tweets and shares are loaded.
The two sharethis scripts are already loaded in the header.
The final body code looks like this :
Button that opens popover
<div id="btnParent_head">
<button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
<i class="fa fa-thumbs-o-up"></i> Pledge
<button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>
Javascript/JQuery
$(document).load(function(){
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
var text = '';
text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
return text;
},
placement : 'bottom',
callback : function(){
reloadStBtns(resizePopover,$('#btnParent_head .popover'),$('#shareHead'));
}
});
});
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
function reloadStBtns(callback,popover,parent) {
stButtons.locateElements();
setTimeout(function(){
callback(popover,parent);
},500);
}
function resizePopover(popover, parent) {
var i_width = parent.outerWidth();
var i_swidth = popover.outerWidth();
var i_nleft = (i_width - i_swidth)/2
popover.css({'left':i_nleft});
}
I wish there was a better solution than doing the setTimeout, but I couldn't find anything.
It doesn't look like you have linked the share buttons up to anything. Try wrapping each span pointing to a resource in an anchor tag e.g.:
<span class='st_facebook_hcount margin-10' displayText='Facebook'></span>
Also, it doesn't actually matter where your Javascript goes, however you should put it all at the end of your document as it will make your page load faster.