Hi I'm making my own website and I want to be able to change the style sheet and content of the page with js.
So I wrote this:
<head>
<link id="style" rel="stylesheet" href="css/index.css">
</head>
<header>
<ul id="nav">
<li> <input id="home" onclick="home()" type="image" src="vzbt.png" widht="55" height="55"></li>
<li> <button id="links" onclick="links()">Links</button> </li>
<li> <button id="about" onclick="about()">About Me</button> </li>
<li> <button id="music" onclick="music()">Music</button> </li>
<li> <button id="contact" onclick="contact()">Contact</button> </li>
</ul>
</header>
This is the js that I wrote so far
function links(){
document.getElementById("style").setAttribute = ("href", links.css);
}
But it doesn't work, so I want to ask if someone can help me? Please.
My guess is you should be doing it in following way:
function links(){
document.getElementById("style").setAttribute("href", "css/links.css");
}
As links.css is not some js variable, you should put in inside " "
Don't load any CSS into the page. On load of the page, determine which CSS and then use the following method to dynamically add the desired CSS to the page. You will need to store the chosen theme in localStorage and then use that on page load to determine the css file to load.
see: How to load up CSS files using Javascript?
setAttribute is a function, not property (you try to assign a value to it with =).
function links(){
document.getElementById("style").setAttribute("href", "css/links.css");
}
OR
function links(){
document.getElementById("style").href = "css/links.css";
}
function links(){
document.getElementById("style").href = path_Of_CSS_File;
}
You can also assign the value of href to the new value.
I feel really stupid that I didn't figured it out sooner there was an error that "links" is not a function so I renamed it to "link" and surprise it works just fine but thanks to all of you for taking your time and trying to help.
Related
I'm working on a vanilla javascript project so I cannot use jQuery. I'm trying to use the following to move some HTML from one placement to another:
parent.appendChild(element);
I'm trying to place the forms into a different placement as I placed in the comment in my HTML code. I'm trying this but it's not working at all.
Javascript:
var loginButton = document.querySelector('[data-login-header-button]');
var loginDropdown = document.querySelector('[data-login-dropdown]');
var shopCartButton = document.querySelector('[data-shopping-cart-header-button]');
var shopCartDropdown = document.querySelector('[data-shopping-header-cart]');
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
HTML:
<header>
<nav data-nav-services>
<ul class="nav-services">
<li data-test>
<a class="icon icon-shopping-cart icon-arrow-down" href="#" data-shopping-cart-header-button>
shopping cart
</a>
<!-- PLACEMENT FOR data-shopping-header-cart -->
</li>
<li>
<a class="icon icon-user icon-arrow-down" href="#" data-login-header-button>
Login
</a>
<!-- PLACEMENT FOR data-login-dropdown -->
</li>
</ul>
</nav>
<form class="login-dropdown" data-login-dropdown>
...CONTENT...
</form>
<form class="shopping-cart" data-shopping-header-cart>
..CONTENT..
</form>
</header>
The strange thing is that if I turn around the selectors (as here below) it does work and I cannot explain why...
shopCartDropdown.parentNode.appendChild(shopCartButton);
shopCartDropdown.parentNode.appendChild(loginButton);
When you do:
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
It actually works. It is just not showing anything since the forms are empty. Check your Dev Tools and inspect your HTML.
For anybody who wish to know, the code was perfect. The issue was that I was appending this form elsewhere of my code. So there was a conflict as one had a priority over the other. I could use .cloneNode(true) as a solution. I ended transforming that appending to my new goal and solved the issue.
Anybody out there... check all the code for any other appending of the same element. Good advice ;)
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.
I have the following html code:
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
</ul>
</nav>
I need to add the following code before the </ul> tag:
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
However, to do so, I have to use jquery's append(). But I don't know the correct way to add the script type="text/javascript", src="https://app.ecwid.com/script.js?4549118"></script> and <script type="text/javascript">xMinicart("style=","layout=Mini"); </script> inside the append().
Thanks!
EDIT 1:
So you can see what I'm trying to do:
what I need is the following http://jsfiddle.net/u3NKD/5/ The results are two links. However, the second link (the one which says "sacola de compras), must be done with append(), not html. That's what I'm trying to do
EDIT 2:
I tried the code in this Jsfiddle http://jsfiddle.net/u3NKD/7/ and it works perfectly in Jsfiddle, but it does not work in my Squarespace website.
The code in my website is the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
window.onload=function(){
$('nav ul').append('<li id="hello"></li>');
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
}
</script>
Any idea why it doesn't work in squarespace?
Thanks!
Have you tried using something like
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini");
});
to load the script and then activate the xMinicart object afterwards? I can't really understand why you're trying to do this on the fly without more context so that's the best suggestion I can offer.
https://api.jquery.com/jQuery.getScript/ (Load a JavaScript file from the server using a GET HTTP request, then execute it.)
If you really need to place it into that particular spot, then Try this: create a separate html file in the same directory, call it something like myli.html,
then you place this into it:
<ul id="myli">
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
</ul>
Then in your original page where you want this appended you do this, you have to create a dummy container like this
$('<div/>', {id:'dummycont', css: {display: 'none'}}).appendTo('body');
then
$('#dummycont').load('myli.html #myli, function(){
var li = $(this).find('#myli').html();
$('nav ul').prepend(li);
});
So basically this load event will load that particular #myli in the myli.html into a temp dummy container. Then you grab grab that content and prepend it to the target ul.
Let me know if that works for you. I havent tested it yet.
What you are doing is that you are just appending the script as a Text or innerText in the HTML DOM structure.
Call the Js using the getScript or Ajax call. (Ajax call with return type script is a getScript)
And in its return function Call the xMinicart function.
In you Dom just Append a 'li' with a specific id and in the getScript success function pass the id to xMinicart function/
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
<li id="hello"></li>
</ul>
</nav>
Your Js call should be
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
This will load the cart on the page.
Check the Jsfiddle here http://jsfiddle.net/u3NKD/6/
I have a task to solve and I am quite new in js and stuff, so please help me out on this.
I've got this in php(I use php cause I need to use databases as well):
What I want is to put external html contents in the container without reloading the whole page. Lets call the external contents link1.html;link2.html...
When load the page I want the container with the content of link1.html whick is also available and can be recalled by clicking link1.
I tried jquery and stuff but it was not really work for me. I'd like to use external js or ajax or jquery or something like that.
Please help!!!
Thank you in advance for everyone!
<div id="links">
<ul>
<li id="link1">link1</li>
<li id="link2">link1</li>
<li id="link3">link1</li>
<li id="link4">link1</li>
</ul>
</div>
<div id="container"></div>
You can use load(), $.get() or $.ajax for loading stuff, an example:
<div id="links">
<ul>
<li id="link1"><a href='path'>link1</a></li>
...
</ul>
</div>
$('#links a').on('click', function(event) {
event.preventDefault();
$('#container').load(this.href);
});
hi i have this code
html code
<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>
css code
#addQuestionChoices{display:none;}
javascript code
function appear()
{document.getElementById('addQuestionChoices').style.display="block";}
but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ?
thank you for answering
The <li> tag must be inside an <ul> or <ol>, and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul>:
<input type="button" onclick="appear()"/>
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
just be sure to define the function before, like in this fiddle: http://jsfiddle.net/2dUfa/
<script>
function appear() {
document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
As a sidenote: the default display property of a <li> element is list-item (and not block)
It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.
I have written a jsFiddle example of how you could tackle this task:
http://jsfiddle.net/dLqja/1/
In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.
Inclusion of jQuery
Make the following is the first JavaScript that you include in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).
Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.
None jQuery Version...
You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages.
http://jsfiddle.net/SvufY/1/
Try putting the <li> inside of a <ol> or <ul> tag.
You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:
<input id="clickButton" type="button" value="submit" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
<script>
document.getElementById('clickButton').onclick = function() {
document.getElementById('addQuestionChoices').style.display="block"
};
</script>
You can see a working example of this at http://jsfiddle.net/xxgdB/
Note also you can use either list-item or inherit in the display field to achieve the same effect.