I have got show|hide script. It work's good but I need to modify html of this script
http://jsfiddle.net/kolxoznik1/nRf5f/
like on my schema
<!--Links-->
<div>link1</div>
<div>link2</div>
<!--Hide divs-->
<div>Show1</div>
<div>Show2</div>
and my goal is that html look like this:
example html what I want to do
<div class="product_menu_categories">link_1</div>
<div class="product_menu_categories">link_2</div>
<div class="copy hide">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
<div class="copy hide">
<ul>
<li>test4</li>
</ul>
</div>
Are you saying that you want you page structure to be:
<!-- Top Level Menus/Categories -->
<div>Menu Item #1</div>
<div>Menu Item #2</div>
<!-- Submenu Items -->
<div id="submenu-of-menu-item-1">
<div>Item A</div>
<div>Item B</div>
</div>
<div id="submenu-of-menu-item-2">
<div>Item C</div>
</div>
but yet display the submenus under the correct menu item?
If so, change $("div.copy:eq("+i+")").toggle().siblings("div.copy").hide(); from you JSFiddle code to
$("div.copy:eq("+i+")").insertAfter(this).toggle();
$("div.copy:not(:eq("+i+"))").hide();
Basically what that does is move the submenu to the correct position on first click, and then hide the rest of the div.copy elements.
Here's your modified example on JSFiddle: http://jsfiddle.net/pjHu3/
Related
Is there any way I can remove the element in JS and to move inside another class. I have tried multiple ways but its throwing an error.
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<ul>
</ul>
</div>
</div>
<div class="blog">
XYZ
</div>
I am trying to get output like using Javascript
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<div class="blog">
XYZ
</div>
<ul>
</ul>
</div>
</div>
Iam trying to move the class name "blog" inside "posts-item".
Use insertBefore for moved your item:
const referenceNode = document.querySelector('.posts-item')
referenceNode.parentNode.insertBefore(document.querySelector('.blog'), referenceNode.nextSibling);
Try something like this, which works in Chrome for me, for the result you describe in the text:
document.querySelector('.posts-item').append(document.querySelector('.blog'))
...or to get the result you've illustrated, perhaps this:
document.querySelector('.posts-item').after(document.querySelector('.blog'))
You may need to modify the selectors if there are more elements sharing the classes used.
See docs at https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after and https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
I'm having trouble toggling the hamburger drop-down menu. Basically I have the hamburger icon in a container, but the navigation list is in a great grandparent div, and I don't know how to toggle the display for the navigation list from inside a lower ancestor div using JQuery.
Edit: Forgot to specify that I want to display the navigation list with the container's myFunction(this) if possible
<div class="header">
<div class="header_content">
<div class="header_icon">
<span class="toggle">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</span>
</div>
<ul>
<li>Home</li>
</ul>
</div>
</div>
jsfiddle
You could give the Ancestor element an id
like <ul id='menu'></ul>
And then use jQuery like $('#menu') to access this element via its ID and do whatever you like with it.
This works with every element in the DOM as long as the ID is unique, which it should be.
Edit (Link to jQuery Selector Docs):
jQuery-Selectors
I am using bootstrap with angularjs mainly because I want to user partials with my navbar
I have taken this template and added angularJS
http://ironsummitmedia.github.io/startbootstrap-landing-page/
Here is the navbar
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Inicio
</li>
<li>
Servicios
</li>
<li>
Contactenos
</li>
</ul>
</div>
And below that are the divs with the content of the navbar options
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
When I click on the Servicios (#services) is taking me to
http://localhost:8080/index.html#/services
instead of taking me to
http://localhost:8080/index.html#services
a / was added between # and services
I have nodejs installed and running http-server (npm pakckage) for testing purposes
I found the solution
When creating the links use two ## and the target="_self"
Question 1
Question 2
Question 3
And use the id attribute in your html elements like this:
<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>
There is no need to change any routing or anything else
Below is my psuedo-code for a Single page website I am doing. I need to be able to make a single page website that is not scroll-based (which is the typical). The idea here is that my site have a nav where user selects a menu and depending on the selected menu the correct page div is rendered on the content div.
The page divs are also in the HTML and should not be displayed unless the correct menu is selected (or if a better approach is to place the pages in Javascript file):
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1"> <!-- for menu1 -->
<div>the content</div>
</div>
<div id="page2"> <!-- for menu2 -->
<div>the content</div>
</div>
How can achieve this with jQuery?
Here is what you looking for
Html :-
<nav>
<ul>
<li class="nav active" data-id="1">menu1</li>
<li class="nav" data-id="2">menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
<div id="page1" class="page">
<!-- for menu1 -->
<div>the content from page 1</div>
</div>
<div id="page2" class="hide page">
<!-- for menu2 -->
<div>the content from page2</div>
</div>
</div>
Jquery :-
$(document).ready(function () {
$('.nav').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.page').hide();
var clickedId = $(this).data('id');
$('#page' + clickedId).show();
});
});
Working Demo
To display preloaded contents in different containers you can use anchor tag with some CSS
HTML
a
b
c
<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>
CSS
#page1, #page2, #page3{
display:none;
}
#page1:target{
display:block;
}
#page2:target{
display:block;
}
#page3:target{
display:block;
}
As another answer stated, you may want to take a look at AngularJS. Here is an excellent tutorial to get you started if you choose: http://www.youtube.com/watch?v=i9MHigUZKEM
However, since your question stated jQuery, the best way will probably be to have all the pages separate html pages that are loaded in via AJAX and replace your current html.
The other approach is to have everything on the page at once and hide and show the content based on the menu item the user clicked. However, this may make the page REALLY sluggish if you have a lot of content all on the page at once.
If you want the content to be embedded in the page but hidden, use jQuery's .hide() and .show()
If you want to keep the content in separate pages, use jQuery's .load()
use this code , make sure your #page1 and #page2 divs hidden initially
jQuery(document).ready(function(){
jQuery('li').click(function(){
var new_index = parseInt(jQuery(this).index())+1;
jQuery("div[id*='page']").hide();
jQuery('#page'+new_index).show();
});
});
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1" style="display:none";> <!-- for menu1 -->
<div>the content 1</div>
</div>
<div id="page2" style="display:none";> <!-- for menu2 -->
<div>the content 2</div>
</div>
Try this link, it will help you. you are having navigation bar on your right hand site from where you can navigate through out your website.
Single page website
I've looked around and unfortunately, haven't found anything that quite matches what I'm hoping to achieve. I have two things going on. First an image/content slider which I'm using Awkward Showcase for. Then within each slide I need to build a mousein/mouseout effect that swaps and hides an image when the user hovers over the text option. My JS looks like this:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
My html looks like this:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-2" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-3" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1">Hover Change Image 1</li>
<li id="newsitem-2">Hover Change Image 2</li>
<li id="newsitem-3">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-5" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-6" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4">Hover Change Image 1</li>
<li id="newsitem-5">Hover Change Image 2</li>
<li id="newsitem-6">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
Any suggestions would be hugely appreciated. One thing to note is the code I've written only works once, once you engage the slide function the hover effect breaks unless you hard refresh.
Edit: Question is, how can I make this more efficient. I have multiple items (image and text). And any ideas why this breaks once the slide function is engaged?
I used ID's because it's a one to one relationship between the text and the associated image.
Edit 2: If I swap the order of my js, the function breaks. Here is a JSFiddle as long as I keep this order everything works until I engage the slider.
http://jsfiddle.net/mV3dJ/
I've not really seen a function done like this before but one thing that stands out to me as a potential breaker is this
var vid = $(this).attr('id').replace('newsitem', 'news');
If you're replacing an ID of something which listen to an event, then the event can only occur once on that element (as the next time it has a different name and so won't recognise it.
Ideally you want to use a web debugger like firebug or Chrome developer tools, set breakpoints and figure out from stepping through the code why it isn't working correctly.