I need to finish javascript for load html page into div. I want load page1,page2 and so on into div id="content". If someone help me I will grateful. Thanks
Here is jsfiddle of this code
HTML
<div id="menu">
<nav>
<ul>
<li ><a class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a href="2.html" ><b>Page2</b></a>
</li>
<li ><b>Page3</b>
</li>
<li ><b>Page4</b></li>
<li ><b>Page5</b></li>
</ul>
</nav>
</div>
<div id="content"> </div>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}
#content {
position: relative;
float: center;
width: 770px;
height: 670px;
clear:both;
margin: 0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}
JAVASCRIPT
$(document).ready(function(){
$('nav ul li a').click(function(){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Assuming your href reference the file with the contents that you want to show, you can use .load(). You can get the href property using .prop().
Prevent the default action (redirecting to a new page) when your anchors are clicked.
You may also want to trigger the this functionality on page load for the .active nav button. I've added a filter and a click trigger afterwards for this reason.
$(document).ready(function () {
var $navAnchors = $('nav ul li a');
$navAnchors.click(function (e) {
var $this = $(this);
e.preventDefault();
$navAnchors.removeClass('active');
$this.addClass('active');
$('#content').load($this.prop('href'));
}).filter('.active').click();
});
Notice I've assigned your matching jQuery collection to a variable, to save you making repeat selections. This way nav ul li a is only searched for once, on DOM load.
Use $.get.
$(document).ready(function(){
$('nav ul li a').click(function(e){ // when a nav link ('a' tag) is clicked...
$('nav ul li a').removeClass('active'); // remove the css class "active" from any nav links.
$(this).addClass('active'); // add the css class "active" to the one we clicked
e.preventDefault(); // <-- important! // prevent the page from navigating away
var page = this.href; // get the url the link would normally go to
$.get( page, function( data ) { // in the background, get the content of the page for the link we have clicked
$( "#content" ).html( data ); // load the content we have into the element with id "content"
});
});
});
If you're saying that the page is empty when you first load it, that's expected. If you want it to load something, you'll need to manually fire off the click event when the page loads.. something like:
$('nav ul li a.active').click(); // Get the nav link which has class "active", and fire the click() event.
... should do the trick.
Note -- fiddle won't work, as it doesn't support AJAX stuff very well.
Second Note - George's answer is a simpler version of this. Use that. :)
Related
I am having a little difficult creating a navbar that when clicked it opens a small window on the same page like on the image.
Create the small window as it's own div:
<div id="myID"> This content will show when I click the navbar</div>
Add the following CSS:
#myID{
display: none;
}
Then use some script to show/hide the element:
$(document).ready(function(){
// change #nav to whatever the ID of the nav element is.
$('#nav').on('click', function(){
// show/hide pop up on click
$('#myID').toggle();
});
});
You can create a Navbar like this. This is the only dummy. In given image, they have one fix element and when you click on nav element according to that they are updating the content of that element.
$('#myNav').find('li a').click(function (e) {
$('li.active').removeClass('active');
$(this).parent('li').addClass('active');
$('#main').html($(this).html());
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #567;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ccc;
}
.active {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
<li class="active">Home</li>
<li>Service</li>
</ul>
<div id="main">
Home
</div>
It will help you to create a nav bar.
I have a file (jquerymenucss.js) in app/assets/javascripts. And I have a picture (arrow-down.gif) in app/assets/images. But this picture in not view on page!!! (view a empty picture).
How to correct write a path?
My js file:
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}
var jquerycssmenu={
fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
$targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
},
function(e){
$(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)
css file
.jquerycssmenu {
font: bold 12px Verdana;
padding-left: 30px; /*offset of tabs relative to browser left edge*/
}
.jquerycssmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jquerycssmenu ul li {
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jquerycssmenu ul li a {
display: block;
padding: 5px 20px 10px 0;
margin-right: 3px; /*spacing between tabs*/
color: #aa9685;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.jquerycssmenu ul li a:hover {
color: #f00;
}
/*1st sub level menu*/
.jquerycssmenu ul li ul {
position: absolute;
left: 0;
display: block;
visibility: hidden;
border-top: 1px solid #973133;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li {
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul {
top: 0;
}
/* Sub level menu links style */
.jquerycssmenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
background: #761f20;
color: #ffffff;
padding: 8px 5px;
border-top-width: 0;
font-size: 11px;
}
.jquerycssmenu ul li ul li a:hover { /*sub menus hover style*/
background: #b14546;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass {
position: absolute;
top: 7px;
right: 5px;
}
.rightarrowclass {
position: absolute;
top: 5px;
right: 5px;
}
If you're assigning the image path in JavaScript, for instance the src property of an img element, then the path will be relative to the document (not the script you're running it in). The path is relative to the document's URL as the client sees it.
(This is different from CSS, where the path is relative to the URL the client sees for the CSS file, not the document the CSS file is used in.)
So for instance:
If the client (browser) sees the document at http://www.example.com/foo/document.html, and your code is included (from anywhere) in that document, and the actual URL the image is served on is (guessing) http://www.example.com/assets/images/down-arrow.gif, then you'd need ../assets/images/down-arrow.gif or /assets/images/down-arrow.gif.
If the client sees the document at http://example.com/doc.html and the image is on http://example.com/app/assets/images/down-arrow.gif, then the relative path is app/assets/images/down-arrow.gif (or /app/assets/images/down-arrow.gif).
If you're dead set on just having all your plugin in one (JS) file and not use an extra CSS file you should use absolute URLs. Since you'll probably be including your plugin in all forms of pages (foo/, bar/this, there/is/only/zuul). Compare T.J. Crowder's answer. From the CSS file you can use relative URLs, relative to the CSS file.
I have many unordered lists of 5 li in each like
<ul class="Rank">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I want to change background-color of current li:hover element and all previous li elements in that list. Suppose, if I hover over 3rd li then 3rd, 2nd and 1st li should have background-color:#00f;
I can do it in jQuery or JavaScript, but I want it in pure CSS. Currently following this article: http://css-tricks.com/useful-nth-child-recipies/
I can change background of currently hovered li element with this .Rank li:hover but cannot understand how can I change background-color of the previous elements of that current .Rank list.
From above article I also learnt to change background until nth-chid but cannot figure out how to apply :hover on it.
.Rank li:nth-child(-n+5)
{
background-color:#00f;
}
http://jsfiddle.net/coma/PLBYG/2/
or
http://jsfiddle.net/coma/PLBYG/3/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
}
ul.rank > li {
position: relative;
margin: 0;
height: 30px;
background: #ccc;
transition: background-color 350ms;
}
ul.rank:hover > li {
background-color: #00f;
}
ul.rank > li + li {
margin-top: 10px;
}
ul.rank > li:hover ~ li {
background: #ccc;
}
ul.rank > li + li:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
or!!!
http://jsfiddle.net/coma/PLBYG/4/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
Posting my answer for reference (to those who come viewing this later like I did).
Here is a solution that doesn't use :before or :after.
http://jsfiddle.net/nLCZK/
It uses float: right for all the lis, and you also have to put the lis in opposite order you want them to appear.
I have 7 menus in my code.Sometimes it may be 6 based on the usertype.If admin is entered it will be 7.User may have only 6 menus.
How can resize the menu dynamically.
For that I used the code
<div id="menu">
<ul>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
<li>home7</li>
</ul>
</div>
How can I do this with jquery?
EDIT
$(document).ready(function() {
if ( $('#menu ul li').length > 6 ) {
$('#menu ul li').css('width','14.5%');
}
else
{
$('#menu ul li').css('width','16.6%');
}
});
}
});
Assuming that the desired outcome is for the above menu to be rendered in one line, regardless of the exact number of items -
the best way to do this would be with tables, as they have native behavior for this type of thing ( taking up a long line and distributing items evenly over it ). The good thing is that we can easily fake that behavior using
#menu { display: table; width: 100%; }
#menu ul { display: table-row; }
#menu ul li { display: table-cell; }
this will automatically distribute your <li>s over a long line, using the containers width.
You can also see a jsFiddle with an example of the above.
Assuming hexblot's answer isn't what you wanted and you want to distribute LI's of a varying width across the width of a container element, without the LI's necessarily taking up the full-width of your navigation bar then use this:
http://jsfiddle.net/sxGMZ/
#menu ul {
display: block;
text-align: center;
width: 100%;
background: brown;
}
#menu ul li {
display: inline-block;
height: 30px;
padding: 10px 12px 0 12px;
background: #ccc;
}
Instead of table cells use display inline-block:
#menu { display: inline-block;background:#000; }
#menu ul { display: inline-block; margin:0;padding: 0; }
#menu ul li { display: inline-block; margin:0; padding: 0;}
#menu ul li a { display: inline-block; padding: 10px; color: #fff;}
#menu ul li a:hover { color: #ff0;}
Fiddle here: http://jsfiddle.net/BtvY9/
CSS:
ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}
ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}
ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}
HTML:
<ul class="topnav">
<li>Home</li>
<li>
Tutorials
<ul class="subnav">
<li>Sub Nav Link</li>
<li>Sub Nav Link</li>
</ul>
</li>
</ul>
Javascript/JQuery:
$(document).ready(function() {
$("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
The menu will show when the <span>^</span> is clicked, but the moment you want to select a sub item, the menu disappears.
What happens is you're no longer hovering so
$(this).parent().hover(function() {}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
this is being called. What you have to do is put an invisible div behind the nav of whatever size you see fit, then use .mouseout() to call the .slideup().