I want to dynamically change the text of a span when a dialog is loaded using jQuery mobile. Following is the code present in my first page.
<a data-transition="turn" id="profile-btn" data-rel="dialog" href="profile.html">Some Text</a>
In the profile.html I have
<div data-role="page" id="profile-page" data-role="dialog">
<span id="username">username</span>
</div>
Following is the js code
$(window).load(function() {
$(document).on('pageinit', '#profile-page', function () {
jQuery("#username").text(localStorage.user);
});
});
My above setup is not working. Do you guys know what I could be doing wrong here?
Related
I made a wordpress page with divi and want to close the nav-menu when the user clicks outside.
How can I achieve this?
Here is the code (I think this part is relevant)
<div id="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="select_page">Seite auswählen</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
and my actual script looks like that
<script type="text/javascript">
(function($) {
$(document).ready(function() {
console.log('onReady');
$(document).on('click','.mobile_menu_bar_toggle',function(){
console.log('working?');
});
});
})(jQuery);
</script>
Because the drawer-toggle gets added dynamically, I better choose the "on"-method to interact with it, right?
As always, thanks in advance.
So I've been playing around with the in built popovers from bootstrap. I am pretty new to JS so please be kind!
I've managed to get multiple popovers to show and hide in the way I like but I would very much like them to follow the element that fires the popover when resizing the window and also for the first popover to load when a user loads the page.
I've searched on here and got the first one to show when loading but it doesn't hide when anything else is clicked.
Using
$(function () {
$("#popbadge1").popover('show');
});
my js
$(document).ready(function () {
$("#popbadge1").popover({
html : true,
content: function() {
return $('#hiddenpopbadge1').html();
},
});
$("#popbadge2").popover({
html : true,
content: function() {
return $('#hiddenpopbadge2').html();
},
});
$("#popbadge3").popover({
html : true,
content: function() {
return $('#hiddenpopbadge3').html();
},
});
});
my markup
<ul>
<li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a></li>
<!-- Popover 1 hidden content -->
<div id="hiddenpopbadge1" style="display: none">
<h3>Content</h3>
</div>
<li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">2</a></li>
<!-- Popover 2 hidden content -->
<div id="hiddenpopbadge2" style="display: none">
<h3>Content 2</h3>
</div>
<li><a class="badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">3</a></li>
<!-- Popover 3 hidden content -->
<div id="hiddenpopbadge3" style="display: none">
<h3>Content 3</h3>
</div>
</ul>
Ideally I would like the popover to follow the button that triggers it as well when the window is resized.
Anyone able to help?
For me, it's not clear what you mean by...
"I would very much like them to follow the element that fires the popover when resizing the window..."
However, getting the popover to show on page load is just a matter of putting your 1st code snippet inside the (document).ready().
And getting the popover to hide when anything else on the page is clicked is similar to this question, which works with something like this:
$(function () {
// When anything is clicked...
$('*').click(function (e) {
// Except popbadge1
if (e.target.attr != 'popbadge1') {
// Hide the popover
$("#popbadge1").popover('hide');
}
});
});
But there is something going on when you try to click back on the first link, where it won't open the popover. Possibly a conflict with Bootstrap, or something else I missed? Regardless, a simple check to see if the popover has been hidden once before solves it.
Here's the full solution at JSFiddle.
Thanks to grayspace for getting the popover to show one on load and in addition to his answer i set the first popover to focus and it seems to have fixed the slight glitch.
$(function() {
$("#popbadge1").focus();
});
https://jsfiddle.net/j4dut2ux/
Also you will see in the fiddle by displaying as an inline box and adding a div around the .a with relative and absolute positing accordingly the popover now follows its parent.
I'm a beginner with jQuery and I have this HTML:
<a class="a2a_dd" href="https://www.addtoany.com/share_save"><img src="//static.addtoany.com/buttons/favicon.png" width="0" height="0" border="0" alt="Share"/>Share</a>
<div id="share-btns">
<div id="facebook">
<a class="a2a_button_facebook"></a>
</div>
<div id="google_plus">
<a class="a2a_button_google_plus"></a>
</div>
<a class="a2a_button_twitter">
<div id="twitter"></div>
</a>
</div>
I am trying to use jQuery to make it so when you click on the .a2a_dd link, it will toggle the #share-btns div visibility. Here is my code:
(function($){
Drupal.behaviors.toggle = {
attach: function() {
$('.a2a_dd').click(function() {
$('#share-btns').fadeToggle();
});
}
};
})(jQuery);
The problem is, I have a grid of teaser articles all on the same page that all have this HTML on them and when I click on the .a2a_dd link on any of the teasers it toggles the #share-btns div on only the first teaser on the page. Is there a way to get jQuery to recognize the node that was clicked on so it can toggle the div from that same node? Any help would be greatly appreciated.
A quick fix using next(). You need to target the element right after the toggle link (according to your html structure).
$('.a2a_dd').click(function() {
$(this).next().fadeToggle();
});
Plunker example.
Hey guys i am new to HTML and Jquery. Now i am able to replace a container div from my navigation menu using load function but the script does not work if it is called from the container i want to change itself. For example i am running this script
$("#pagehome").click(function(){
$("#container").load("home.html #wraper", function ()
when i call this from another div section(navigation menu) it works just fine and the div
section of container gets replaced with #wraper div of another page
<div id=navigationmenu>
<a id="pagehome" href="#"><;img src"..."/></a>
</div>
</pre>
but when i try to call the script from container div it does not get executed
<div id=container>
<a id="pagehome" href="#"><img src"..."/>
</div>
Try this.
$(document).on('click', '#pagehome', function(){
...
return false;
});
I have this webpage for testing with content on it. In 3 other separate HTML files, I have 3 different navigation menus. What I want to do is include a dropdown menu on the testing page with 3 links in it. Each link would change the navigation on the testing page. For example, there is a default navigation on the testing page. Clicking link 1 in the dropdown would change that navigation. Same with link 2 and link 3. How would I do this in JavaScript or jQuery?
This should fit your requirements. For demonstration see this Fiddle.
<a id="link-1">link 1</a>
<a id="link-2">link 2</a>
<a id="link-3">link 3</a>
<div id="navigation"></div>
<div id="templates" style="display:none;">
<div id="navigation-menu1">navigation-menu1</div>
<div id="navigation-menu2">navigation-menu2</div>
<div id="navigation-menu3">navigation-menu3</div>
</div>
var menu1 = $('#navigation-menu1');
var menu2 = $('#navigation-menu2');
var menu3 = $('#navigation-menu3');
$('#link-1').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu1);
});
$('#link-2').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu2);
});
$('#link-3').bind('click', function () {
$('#navigation').empty();
$('#navigation').append(menu3);
});
The way jquery works is that you set up a listener to a certain event with custom code to run whenever that happens. Here's an example for the link:
<a id="mylink" href="home.html">Go Home</a>
The javascript(put this in between your and tags):
<script type="text/javascript">
$(document).ready(function() {
//This code gets run when the page is finished loading
$('a#mylink').click(function() {
//Handle the event here
});
});
</script>
You also asked how you can change HTML dynamically at run time. jQuery has a great function for this .html()
Say you have some html:
<div id="changeme">Hello</div>
The following jQuery:
$('#changeme').html("Goodbye");
Changes the page's html to the following
<div id="changeme">Goodbye</div>