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 ;)
Related
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.
I'm brand new to javascript/jquery, but have been going okay so far (though you'd hate to see my code), but I've hit a wall with trying to strip out style tags from some HTML I'm trying to clone.
The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.
The original HTML of the top nav looks a bit like like:
<nav id="mainNavigation" style="white-space: normal; display: block;">
<div class="index">
Participate
</div>
<div class="index" style="margin-right: 80px;">
News
</div>
<div class="index active" style="margin-left: 80px;">
<a class="active" href="/about/">About</a>
</div>
<div class="external">
Collection
</div>
<div class="index">
Contact
</div>
</nav>
I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):
var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
' + originalNavItems + '
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?
You can strip the style elements like so:
var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');
You can use
var originalNavItems = $('#mainNavigation').clone().find("*").removeAttr("style");
Then you can use .append() to add that html elements
Fiddle
You can clone into an imaginary div and then fetch the mainNavigation also. You can also remove the style attributes along with that. Hope this works for you...
var temp = $('<div />').html($('#mainNavigation').clone());
temp.find('*').removeAttr('style');
originalNavItems = temp.html();
The nav is cloned but the html() function only returns the HTML for the contents and that's why it disappears. You can avoid some string manipulation by adding the cloned element directly before a target element.
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
$('#mainNavigation').clone()
.find('[style]').removeAttr('style').end()
.insertBefore('#newScrolledNav .newItem');
In the previous case find('[style]') matches elements that have a style attribute.
I'm new to Stack Overflow (and js in general), so this might be really bad ettiquette, but I seem to have accidentally fixed it myself trying to debug my implementation of the first upvoted answer that #Anoop Joshi gave above. Please comment and let me know if it would have been better to just edit my question!
I decided to break the process down into separate steps – similar to #Kiran Reddy's response actually, but I hadn't got to trying his yet.
I tried:
var styledHTML = $('#mainNavigation').clone();
styledHTML.find("div[style]").removeAttr('style');
var originalNavItems = styledHTML.html();
$("#site").prepend('<div… etc.
with a console.log(styledHTML) etc under each line to check what I had at each stage – and it worked! (The code did, console.log didn't?)
I was just doing this to try and log the value of the variables at each stage, but whatever I did fixed it…
Now I need to figure out why I can't even make console.log(variable); work :-/
Try this code
$('#mainNavigation').children().removeAttr('style');
Hope this will help you.
I am new to Meteor (and javascript) and trying to figure out how to integrate the Codrops sidebar menu found here: Codrops. I have created a "sidebar" template and all scripts are loading correctly.
I have the following HTML code:
<div class="morph-button morph-button-sidebar morph-button-fixed">
<button type="button"><span class="icon icon-cog">Settings Menu</span></button>
<div class="morph-content">
<div>
<div class="content-style-sidebar">
<span class="icon icon-close">Close the overlay</span>
<h2>Settings</h2>
<ul>
<li><a class="icon icon-camera" href="#">Default filters</a></li>
<li><a class="icon icon-server" href="#">Storage Use</a></li>
<li><a class="icon icon-heart" href="#">Favorites</a></li>
</ul>
</div>
</div>
</div>
</div><!-- morph-button -->
And this javascript code for the Meteor callback:
Template.sidebar.events({
'click .morph-button': function () {
$('.morph-content').transition();
}
});
Template.sidebar.rendered = function () {
$('.morph-content').transition();
};
I am having trouble understanding how this works. I am getting funny results. Help much appreciated!
I was having trouble finding much documentation on the menu you are talking about. So I am going to take a more JS approach to answering this question.
Under events you are attaching transition() to $('.morph-content'), which you have already done when the DOM was rendered. I would assume that the one doesn't belong. You may just need to attach it under rendered, and the included JS may attach everything else it needs to the DOM(i.e. when you add $('.date').datepicker() to an HTML element.
First of all, I want to say that I have seen some topics already with similar question. I have tried withe the responses of these topics, but I have not been able to find a solution for my problem. Maybe the difference is that I am using AngularJS
(HTML)
<li class="article-list_item" ng-repeat="noticia in news" >
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
(JS)
$(document).ready(function () {
$(".article_news").click(function (event) {
$(this).addClass("approved");
});
});
What I am trying to do is to add the class "Approved" to the object I am clicking.
But when I click the link inside the <article> , I dont want to add the Class. Instead, I want the browser to open the URL.
How can I do this? Must I use stopPropagation(), preventDefault() or similar? How should I use them?
Thanks in advance
Well, Angular automatic filter link action if you implement it in angular way. For implementing it in angular way you should create directive to bind click event which handles your issue. Still you can solve it like this.
ng-click="$event.stopPropagation()"
Your HTML
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a ng-click="$event.stopPropagation()" href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
I followed the tutorial on the site to get inline content working. Even checked their source and made changes to my own site.
Here is the site: http://miuzer.com/new/
Check the links in the upper right. About works, but register and login don't as their content is inline. What is the issue here?
I find a lot of js libraries are buggy, overcomplicated and poorly documented, fancybox is one of the worse.
Delete this line:
<a id="popup_img" style="display:none" href="img/popup_img.jpg"><img src="img/popup_img.jpg" alt="" /></a>
Alter about/register/login part like this:
<div class="header-content">
<ul>
<li>About</li>
<li>Register</li>
<li>Login</li>
</ul>
Delete these lines from interface.js
$('#popup_img').fancybox();
$('#register-dialog').fancybox({'type':'inline'});
$('#login-dialog').fancybox({'type':'inline'});
// $('#popup_img').click();
and add this line instead:
$('.header-content ul a').fancybox();
By the way, it's a very well documented and well written plugin and I can't say same thing for your code...