I have implemented some code which works on desktop, but in mobile, it does not work as expected.
In mobile, when you click on a div, it should toggle to open up the contents. However, it opens it, then closes it again automatically so the user doesn't get to see the contents.
Here is what I have so far:
$(document).on('click touchstart', '.contact_Style h2.general_Click', function() {
$(this).next().toggle('slow');
});
<h2 class="general_Click">Search </h2>
<div id="search">The Content</div>
Any help would be appreciated.
Just bind to click, because of mobile browsers trigger it on touch, so you get 2 callback calls (Which open and then close content).
You can read about this behavior here
I've made a small correction in your code.
At first you need to hide your content div by default.
Add this in your style file:
#search{display: none}
Then try to use this js code
<script type="text/javascript">
$(document).on('click', 'h2.general_Click', function() {
$(this).next().toggle('slow');
});
</script>
Your html would be as it is:
<h2 class="general_Click">Search </h2>
<div id="search">The Content</div>
In My case selector "h2.general_Click" is created 2 times (Please check in your view-source) and that is why it is calling 2 times and closed automatically
Please check your view-source code that your selector is not repeating.
If it is repeating then select a sector that do not repeat in your web page.
Related
I want to create a 5s time delay modal like this
I have done many googling and research but have been stuck with creating a modal like this that is not triggered by a button. I tried following the instructions (using just javascript) from W3Schools https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp and https://www.w3schools.com/howto/howto_css_modals.asp but nothing works. And both are trigged by a button.
I don't know if it is because I am using JQuery codes for featherlight and slider. I also tried following the site https://www.sitepoint.com/show-modal-popup-after-time-delay/ but nothing pops up. I will appreciate a lot someone can kindly help and provide me with relevant scripts/css/js codes as I am quite new to coding. Thank you so much!
<div class="modal">
<div class="modal-content">
<span class="closebtn">×</span>
<h4>WELCOME</h4>
<label for="email">Don't miss out on the latest updates!</label>
<input placeholder="enter your email here" id="email">
<button class="subscribe">SUBSCRIBE</button>
</div>
</div>
I also tried using http://jquerymodal.com/ but does not work from a button nor I know how to use that with the settimeout function without using a button to trigger the modal box.
Please upload your code as well to see where you are wrong, Your approach is good but while questioning make sure that all elements are covered the languages tags, the reference and your code
Mostly these modals are used to display newsletters or any discount a site has to offer
The code at the reference website looks good
You can put the code at end before the closing body tag in the script which will display the newsletter once the page is loaded and then add the time delay you want to set
Assuming you want a modal that will automatically hide or disappear after a certain timeout, here's a JsFiddle that does it.
$(document).ready(function(){
$('#modal').click(function(){
$('#exampleModal').modal('show');
setTimeout(function() {$('#exampleModal').modal('hide');},
1000);
});
});
EDIT:: If you want your modal to load when the page loads (Not triggered by a button) you can just do:
$(document).ready(function(){
$('#exampleModal').modal('show');
setTimeout(function() {$('#exampleModal').modal('hide');},
1000);
});
I am using a bootstrap carousel with a background image on each slide. Each slide has links displayed on top of it. I have reviewed a number of answers on SO, but none seemed to address this problem. Here is what a slide in the carousel looks like :
<div class="item">
<div class="banner-link">
<img src="myimage.jpg" height="486" width="1024" alt="image-description">
<div class="holder">
<div class="block">
<div class="links">
<strong class="title">The links</strong>
About Us
Contact
</div>
</div>
</div>
<input type="hidden" name="link" readonly value="http://www.google.com/" />
</div>
</div>
jQuery:
$(document).ready(function () {
$('div.banner-link').click(function () {
if ($(this).find("input").length) {
window.open($(this).find("input:first").val(),'_blank');
}
});
});
My problem is that when I click on any of the child links, both the child link AND the background image link are clicked. The child link opens in the main tab, and the background jQuery click event opens in a new tab.
I have tried a few things with z-index but it did not solve my problem. How can I allow the background image to be clicked everywhere BUT on the child links?
Any help is appreciated.
If I well understood your post, you want make it possible to click on the link without the background to be clicked right?
If so, you should have a look at the stopPropagation function (here is the doc : http://www.w3schools.com/jquery/event_stoppropagation.asp) , if not, I guess I misunderstood.
Have a good day !
If you want to only open a new link when the image is clicked you need to change your click event to only fire when the image is clicked and then look for the parent of this rather than this.
$(document).ready(function () {
$('div.banner-link img').click(function () {
if ($(this).parent().find("input").length) {
console.log($(this).parent().find("input:first").val());
}
});
});
You can probably clean this up and I changed it to log to console as open a new window for testing so very annoying. Works with the code you supplied over two different divs.
Edit with lots of words:
So this $(this) object will be the item clicked on. We have defined the element to be trigger on as the img tag inside any div with the class of banner-link. $(this) becomes the img object but we want to then fine the hidden input (Without moving it). To do this you do $(this).parent() to get the relevant div.banner-link, if you don't do it this way you're get any/all of the div.banner-link's due to having multiple on the page. Now you're in the right place you can continue your find as normal to find the first input and get the value of it.
Hope this helps!
I have an Iframe embedded like this:
<iframe id="foo" src="http://www.something.com" style="width: 90%; height: 300px"></iframe>
Each time the page loads focus gets lost from the top of the page and switches to this Iframe that is in the footer.I was wondering how can i remove the focus from this and make the page load "normally"?
Thanks!
Update: Yes, iframe is being loaded from another source (not the same domain)
if assumed the iframe is not served from the same domain.. you can place any other focusable dom element after the iframe in the footer with autofocus set as true. And if that does not work please try the following in the parent main window:
$(window).on('load', function() {
setTimeout(function(){$("body").focus()}, 100);
};
OR going by vanilla JS
window.onload = function() {
document.getElementById("some-focusable-element-from-parent-window").focus();
};
Well there is too much things we can do, for example on window load we scroll to the top with scrollTop function, ...etc
But with such methods, where we take off the focus and move back to the top when the window is completely loaded, it will come with a glitch and no well effect.
After a while of thinking, and experiences, i come with that:
We remove the iframe with display:none, when the dom is ready. Next when the window is completely loaded, we bring it back. To do that efficienly, we write a style class like that:
.display_none{
display:none;
}
and we will add this class to our iframe, when the document is ready, and remove this class when the window is fully loaded. There is the code :
$(document).ready(function(){
$("#myFrame").addClass("display_none");
$(window).load(function(){
$("#myFrame").removeClass("display_none");
});
});
Now there is a situation where this will not work! if the iframe is created and added with another script, then the dom may be loaded but not the iframe element itself (because the script may not have create it yet)! And that was the case in my case .
SOLUTION:
put the iframe in a container, let say a div container, and apply the method above to this container. All should work nickel! On dom load the div is hidden, next when the window is fully loaded, it restore it back! and you get your iframe, which will be loaded and get displayed. No glitch, and efficient.
We can use sandbox attribute to block automatically triggered features (such as automatically playing a video or automatically focusing a form control).
<iframe src="https://muthukumaran-m.github.io/" sandbox></iframe>
Check this for more info
Assuming you have iframe in a same domain:
You can do this :
$("#foo").on('load', function() {
$("body",parent.document).focus()
};
It is already 2019 and I kept on having the same issue on some of my mobile websites. The focus kept on being stolen by the contact form near the footer.
My rushed method may not be the most elegant way of doing this, but by modifying your iframe form to be hidden on mobile devices, with an expand/collapse button to make it visible on demand, you'll stop this jump from happening.
The simplified code:
<div class="d-block d-sm-none visible-xs"><!-- show only on mobile devices -->
<a class="btn" data-toggle="collapse" href="#blockToControlID" role="button"
aria-expanded="false" aria-controls="blockToControlID">
Expand/Collapse iframe Block
</a>
<div class="collapse" id="blockToControlID">
<div class="card card-body">
<iframe src="path-to-form"></iframe>
</div>
<div>
</div>
<div class="d-none d-sm-block hidden-xs"><!-- hide on mobile devices -->
<iframe src="path-to-form"></iframe>
</div>
For bootstrap 3 you would use visible-xs and hidden-xs to hide or show the snippets of code.
For bootstrap 4 you would use the "d-block d-sm-none" to show the mobile-only code; and "d-none d-sm-block" to hide the mobile-only code.
Scripts needed on footer:
<script src="js/jquery/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
The jQuery version will depend on your bootstrap 3 or 4 setup.
popper.js must be loaded before bootstrap.js, otherwise it'll fail to work.
Prior to reaching this hack, I tried every possible thing. Sadly, none of the JS, jQuery and reCaptcha hacks posted by other members and forums worked. The page load would always default to the form.
While the solution could be nicer with some js/ajax/jquery or even php, this simple code is quick and works fine with bootstrap enabled websites. Modify as needed.
I hope this helps
I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.
Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");
I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});
jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.
I have a tab container with tabs, that depending on what tab is selected, i would like a function to run. I have already created the function in Java Script, that will either Hide or Display a window. The function works fine. How do i tell the tabs to run this function? In the code below, i show in the "Contents" of a tab, a function intitled "hidediv". I also have a function called "showdiv". I want to remove it from the contents, and have it run automatically when the tab is selected. any suggestions? I do not want it to affect the contents of the tab at all.
Thank you!
<div dojoType="dijit.layout.ContentPane" title="Setup">
Hide div
</div>
This is well described in the reference guide.
Basically, if your TabContainer has id "myTabs", you can do:
dojo.subscribe("myTabs-selectChild", function(selected){
// Do whatever you need here, hidediv() etc..
console.log(selected.title);
});
Edit: If you only want something triggered for a particular tab, you can check the title inside the function:
dojo.subscribe("myTabs-selectChild", function(selected){
if(selected.title == "Setup")
{
hidediv();
}
});
Perhaps a more elegant way to do it, is to use the ContentPane's onShow event, for example like this:
<div dojoType="dijit.layout.ContentPane" title="Setup"
onShow="hidediv">
<!-- Content -->
</div>