How would I change the HTML structure of a page using javascript? - javascript

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>

Related

(Drupal) How to only target elements within node with jQuery?

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.

JavaScript runs only once after page loading

This script is triggered only once when the page loads.
The page has loaded, click the link, the data came from.
Click the link again, nothing.
Overload the page, the link works, etc.
What is wrong in the script, why it triggered only once?
<script>
$(function() {
$('a').click(function() {
$.get('ajax', function(data) {
$('#mydiv').html(data);
});
});
});
</script>
<div id="mydiv">
Update the div!
</div>
Compared the data in the "mydiv" before and after clicking the link:
before clicking the link
<div id="mydiv">
<a href="#">
Update the div!
</a>
</div>
after link was cliked
<div id="mydiv">
<a href="#">
Update the div!
<!--Here is the data that came from.-->
</a>
</div>
Because you're overwriting the a tag that you attached the click event to, you'd need to rerun the code that attaches the click event again. Or you could use event delegation like blex suggests:
$(document).on("click", "a", function(){
}
Because of dynamically created a you should use:
$(document).on("click", "a", function() {

How to run javascript code on menu click

I'm creating a squarespace website in which I have a navigation bar.
I would like to add a javascript code as a link in the navigation bar.
The javascript code is the following:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
I have the following html code: (I got it with FireBug)
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
page1
</li>
<li class="">
page2
</li>
</ul>
</nav>
I cannot edit the code above but I'm able to inject header code.
So, how can I add the javascript code as a third link in the navigation bar?
Thanks a lot!
edit
So I've added the following code
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
but I need the original javascript code within the append. I need the actual code to be the link. How do I do that? If you see the javascript in Firefox you'll understand what I mean. I need the actual link it generates in the navigation bar.
Thanks!
window.onload=function(){
$('nav ul').append('<li><a onClick="yourFunction()" href="javascript:void(0);">Link 3</a></li>');
}
Since you specify you don't have direct access to the html. Only the header.
This will add your menu item with a link, that upon click, executes the function yourFunction(). It will add this item as soon as the page loads.
Note: You need jQuery for the above. But it is also possible with raw Js.

Dynamically change span text when using jQuery mobile

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?

Strange result in firefox14 of javascript

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".m").hide();
$("#home").show();
});
function f(id) {
$(".m").hide();
$(id).show();
}
</script>
</head>
<body>
HOME
HOME2
CONTACT
<div class="m" id="home">home</div>
<div class="m" id="home2">home2</div>
<div class="m" id="contact">contact</div>
</body>
In firefox14: Whenever I click on the first <a> it doesn't work and the page will be blank. But the others except the first <a>(i.e except home) work properly.
But in IE8, all of them work properly.
Why? What's the problem with my code? Is it my problem?
I want to have some kind of menu that the source of the other page (like contact, about us) are in one page, but they are hidden and by clicking on them, they will be visible.
That's because Firefox has defined the function window.home, so it will not refer to the element with id="home". The function is not defined in IE, that's why it's working there.
You shouldn't rely on the elements becoming global variables based on their id. Use a selector to find the elements:
HOME
HOME2
CONTACT
Alternatively, send the name of the id as a string into the function:
HOME
HOME2
CONTACT
and make the function use the string instead of an element:
function f(id) {
$(".m").hide();
$('#' + id).show();
}
Your function calls are all wrong, using undefined variables instead of strings.
Instead of
HOME
It should be
HOME
This has nothing to do with the browser type and version.
You can also change your markup to:
<a href="#home" class='anchors'> HOME </a>
<a href="#home2" class='anchors'> HOME2 </a>
<a href="#contact" class='anchors'> CONTACT </a>
and instead of HTML intrinsic attributes use jQuery click method.
$('.anchors').click(function(e){
e.preventDefault()
$('.m').hide()
$(this.href).show()
})

Categories