I have 2 buttons, Check & Back.
When a user clicks Check, the button should change to Back so they cannot click Check 2 times in a row. However, on mobile view in chrome devtools, this does not work.
Any advice? Thanks in advance!
<button type="button" class='btn goCheck' id="goCheck" data-show="back" style="width: 100%;">Check</button>
<button type="button" class='btn goBack' id="back" style="width: 100%; display: none;" onClick="refreshPage()">Back</button>
$(document).ready(function(){
$('.goCompare').click(function(){
$('.goCheck').hide()
$('.selectBtn').hide()
$('#'+$(this).attr('data-show')).show()
})
})
From your code, you're mixing javascript and jquery. So I just went with jquery fully to solve this making minimal changes to your original code. I rewrote the refreshPage function to fire on the click on the back button. I also removed the onclick method in the html. It seems to work for me in devTools as well. Hopefully this helps.
$(document).ready(function(){
$('.goCompare').click(function(){
$('.goCompare').hide()
$('.selectBtn').hide()
$('#'+$(this).attr('data-show')).show()
})
})
//Refresh Page script
$(document).on('click', '#back',function(){
window.location.reload();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class='btn goCompare' id="goCompare" data-show="back" style="width: 100%;">Compare</button>
<button type="button" class='btn goBack' id="back" style="width: 100%; display: none;">Back</button>
I have tested this answer in Chrome Devtools and confirmed functionality.
I think jquery is overkill here and I think it would be better if you only had one button that was controlled by an event listener.
document.getElementById("goCompareBack").addEventListener('click', function(e) {
if (document.getElementById("goCompareBack").innerHTML === "Back") {
refreshPage();
} else {
document.getElementById("goCompareBack").innerHTML = "Back";
compare();
}
})
function refreshPage() {
window.location.reload();
}
function compare() {
// comparing logic here
}
<button type="button" class='btn goCompareBack' id="goCompareBack" data-show="compareBack" style="width: 100%;">Compare</button>
Related
I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
Using Vanilla JavaScript. Although I recommend using event handler instead of inline JS, this is in view of your code.
Hide the element using style.display
You can redirect the page after hiding the button using window.location
function setLocation(loc) {
document.getElementById('hide-div').style.display = 'none';
window.location = loc;
}
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.com')"><span>'Add to Cart'</span></button>
</div>
You can do this by simple jquery
<script>
jQuery(document).ready(function($) {
$(".button").click(function(){
$("div").fadeOut();
});
});
</script>
Using jQuery you can do this in your onclick:
$('#hide-div').hide()
http://api.jquery.com/hide/
Use jQuery to hide it:
$('#hide-div button').click(function(){
$(this).parent().hide();
});
I assume you have jQuery added to your page already. So, something like this maybe:
$('#hide-div .button').on('click', function() {
$('#hide-div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?
Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});
Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.
I have a button that is hidden when my page is loaded, and on mouseenter I want it to show, then hide again on mouseleave.
HTML
<div id = "t" style='position:absolute; top:0; left:50%;'>
<button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
</div>
Enter / Leave
$( '#toggle' ).mouseenter(function(){
$('#toggle').show();
})
$( '#toggle' ).mouseleave(function(){
$('#toggle').hide();
})
I changed my button to not hide to test this, and the only things that works is that the button hides, but it does so when I actually click it, rather than when I hover over it. The other problem is that I can't figure out any way to get the button to show again. I tried to use .hover(function(){}) but did not get that to work either. Any suggestions?
Closest
$( '#t' ).hover(function(){
$('#toggle').css("opacity",1);
},function(){
$('#toggle').css("opacity",0);
})
Above is the closest I got to my answer but it does not work on hover, instead it works when I click the button and off the button.
jfiddle
$( '#toggle' ).mouseenter(function(){
$('#toggle').css("opacity",1)
})
$( '#toggle' ).mouseleave(function(){
$('#toggle').css("opacity",0)
})
better be invisible to eye , but as a DOM it should exist.
You can do something like this using container div of button:
$( '#t' ).mouseenter(function(){
$('#toggle').show();
})
$( '#t' ).mouseleave(function(){
$('#toggle').hide();
})
Fiddle DEMO
Please find the code provided at the following link for JSFIDDLE
You need to apply the mouse enter and mouse leave on container not on the button. If that is being put on the button then it creates a problem that when you leave the button then the display goes none and then you cannot fire the reenter option again as the DOM element doesnot exist.
HTML Code:
<div class="" id="targetContainer">
<button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
</div>
JS Code:
$("#targetContainer").mouseenter(function(e){
$("#toggle").show();
}).mouseleave(function(e){
$("#toggle").hide();
});
CSS Code:
#targetContainer{
border:1px solid;
padding: 10px;
}
#targetContainer #toggle{
display:none;
}
I finally got this to work with the follow HTML and Javascript. My biggest problem was that when I hid the element, I could not get it back but no answers worked for me but this one (thanks to all who tried).
HTML
<div id = "t" style='position:absolute; top:0; right:0;' onmouseover="showButton()" onmouseout="hideButton()">
<button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
</div>
Javascript
function showButton(){
document.getElementById('toggle').style.visibility ='visible';
}
function hideButton(){
document.getElementById('toggle').style.visibility ='hidden';
}
I am having trouble getting the addThis buttons to show inside of a bootstrap popover. The code is in the html data attribute and the addThis script is firing correctly, but the buttons just don't show even though the code can be seen in it via inspector.
I've done a jsfiddle here:
http://jsfiddle.net/XW9bk/1/
<li id="share" class="text-primary" data-html="true" data-content="<div class='addthis_toolbox addthis_default_style addthis_32x32_style'><a class='addthis_button_preferred_1'></a><a class='addthis_button_preferred_2'></a><a class='addthis_button_preferred_3'></a><a class='addthis_button_preferred_4'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a></div>" data-original-title="" data-trigger="manual" data-placement="right"><a class="text-success">Share</a></li>
$('#share').click(function() {
$('.vote, .favorite, #share').popover('hide');
$('#share').popover('toggle');
})
$(document).ready(function() {
var addthis_config = {"data_track_addressbar": true};
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335")
})
I've got it working in a way with:
$('#share').click(function() {
$('.vote, .favorite').popover('hide');
$('#share').popover('toggle');
addthis.toolbox('.addthis_toolbox');
})
The problem now is there is a delay of several seconds before the buttons are displayed in the popover. When the popover is hidden and then reopened, the buttons aren't there and again take a while to appear.
Anyone know what could be causing this?
It seems to be a timing issue with the script loading, combined with the fact that it is essentially dynamic content. This will work for your situation:
HTML
<div class="hidden">
<div class="the-content"></div>
</div>
<br />
<br />
JAVASCRIPT
$(document).ready(function () {
var addthis_config = {
"data_track_addressbar": true
};
var theCode = '<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>';
var theButton = '<button type="button" class="btn btn-default" data-container="body" data-placement="right" rel="popover">Popover on right</button>';
$('.the-content').append(theCode).promise().done(function () {
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335", function () {
setTimeout(function() { $('body').append(theButton); }, 1000);
$('body').popover({
selector: '[rel=popover]',
html: true,
content: function () {
return $('.the-content').html();
}
});
});
});
});
FIDDLE
I achieved what you were trying to do successfully, except that the problem was that share buttons were not clickable. Someone contacted AddThis support, this is the response they got;
Unfortunately without seeing it in action I can't diagnose the problem. If the buttons are visible but not clickable then there's either something hijacking the click action or another transparent element z-indexed over it.
I solved this problem by loading the AddThis buttons after the popover has been shown. See the code below;
<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i>
</button>
<script language="JavaScript">
$("[rel=popover]").popover({
html: true
});
$("[rel=popover]").on('shown.bs.popover', function() {
$('#pcontent').html("<div class='addthis_sharing_toolbox'></div>")
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b")
});
</script>
I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code
<style>
div.delModal
{
position:absolute;
border:solid 1px black;
padding:8px;
background-color:white;
width:160px;
text-align:right
}
</style>
<script>
function showModal(id) {
document.getElementById(id).style.display = 'block';
//$(this).fadeIn('slow');
}
function hideModal(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>
Use .fadeIn() and .fadeOut() on your id parameter ("delAll1") not on this.
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
By using, $("#" + id) you can select an element by its id, that's "#" + id.
See it here.
Note: Change from onLoad to no wrap (head) under framework on the left sidebar to fix the scope issue.
I wasn't satisfied with your first two comments so I made a new fiddle:
http://jsfiddle.net/dkmkX/
$(document).ready(function () {
$('.deleteButton').each(function (i) {
var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
var deleteModal = $(this).parent().find('.deleteModal');
$(this).click(function (e) {
deleteModal.fadeIn('slow');
});
$(this).parent().find('.modalDelete').click(function (e) {
deleteModal.fadeOut('slow');
});
$(this).parent().find('.modalCancel').click(function (e) {
deleteModal.fadeOut('slow');
});
});
}); //ready
This will let you add multiple delete buttons each with their own modals.
There's a comment in the JS about how to find out which modal has been pressed, since this solution is ID independent.
Use fadeIn() on the right selector('#'+id), this in the current context would be the global object.
function showModal(id) {
$('#'+id).fadeIn();
//$(this).fadeIn('slow');
}
function hideModal(id) {
$('#'+id).fadeOut();
}
DEMO
Why do not use id for each button like this
<input type ="button" value="show" id="show">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" id="delete"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
And the jquery like this
$("#show").click(function() {
$("#delAll1").fadeIn();
});
$("#delete").click(function() {
$("#delAll1").fadeOut();
});