applying CSS to current page link doesn't work [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I tried every method, html & css, and javascript & css, and nothing seems to work.
this is the site I'm working on http://www.placepigalle-seattle.com/
This is my Html:
<div id="content">
<nav id="navlist" class="logo-center nav-overlay">
<div class="row">
<div medium-4 columns text-right">
<ul class="menu">
<li>Home</li>
<li>Reservations</li>
<li>Menus</li>
</ul>
</div>
<div class="medium-4 columns text-center">
<img alt="" src="img/logo_medium.png" class="logo medium-7">
<img alt="" src="img/logo-dark.png" class="logo logo-dark medium-10">
</div>
<div class=" medium-4 columns text-left">
<ul class="menu">
<li>Find us</li>
<li>History</li>
<li>Contact</li>
</ul>
</div>
<div class="nav-toggle"><i class="icon icon_menu"></i></div>
</div>
</nav>
This is my CSS:
body#home a#homenav,
body#contact a#contactnav,
body#gallery a#gallerynav,
body#history a#historynav,
body#location a#locationnav,
body#menus a#menusnav,
body#reserve a#reservenav, {
background: #FFD3CEf !important;
}
Many thanks

Remove the extra markup on your CSS selectors (see my CSS sample below)
Add a missing class to the div currently shown as: <div medium-4 columns text-right"> (see HTML fix below)
All your IDs have an extra space at the end (in the HTML) - remove them
Your background attribute needs to adjusted to background-color: #FFD3CE; (in you CSS)
a#homenav,
a#contactnav,
a#gallerynav,
a#historynav,
a#locationnav,
a#menusnav,
a#reservenav{
background-color: #FFD3CE;
}
<div id="content">
<nav id="navlist" class="logo-center nav-overlay">
<div class="row">
<div class="medium-4 columns text-right">
<ul class="menu ">
<li>Home
</li>
<li>Reservations
</li>
<li>Menus
</li>
</ul>
</div>
<div class="medium-4 columns text-center">
<a href="index.php ">
<img alt=" " src="img/logo_medium.png" class="logo medium-7 ">
</a>
<a href="index.php ">
<img alt=" " src="img/logo-dark.png" class="logo logo-dark medium-10 ">
</a>
</div>
<div class=" medium-4 columns text-left ">
<ul class="menu ">
<li>Find us
</li>
<li>History
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-toggle "><i class="icon icon_menu "></i>
</div>
</div>
</nav>
</div>

Given that the site you linked to adds the ID to the body based on the page that you are on, your css is fine (although, you have a trailing comma before the open bracket that should be removed); it's the hex code on your background color that is invalid. You have 7 characters when there should only be 6: #FFD3CEf
Generally speaking, the best way to handle special styles on the active page link is just to add a class (ex. "active") to the link that corresponds with the current page you are on, and then apply the special styles to that .active class in your css.

Related

Selecting an element with JavaScript (z-index)

I want from among the boxes that I put in the code below; Select a box whose z-index is equal to 3 and make its background red to distinguish it from other boxes.
html:
<ul>
<li class="post1">
<div class="content">
<h4 class="title">title post1</h4>
</div>
</li>
<li class="post2">
<div class="content">
<h4 class="title">title post2</h4>
</div>
</li>
<li class="post3">
<div class="content">
<h4 class="title">title post3</h4>
</div>
</li>
<li class="post4">
<div class="content">
<h4 class="title">title post4</h4>
</div>
</li>
<li class="post5">
<div class="content">
<h4 class="title">title post5</h4>
</div>
</li>
</ul>
For this purpose I wrote a script code that does not work. Please edit this code for me:
script:
$("li").each(function(){
var a=$(this).find("li");
$(this).css('z-index',3);
a.style.background= "red";
});
This should work
$("li").each(function(index){//goes througth li elements
if($(this).css("z-index") == 3){//if zindex equals 3
$(this).css("background-color","red");//set back ground to red
}
});

isotope filter - prevent "selected" category from loading all images

I've tried the suggested fixes on Stack Overflow but can't seem to fix my issue. I'm trying to get a "selected" category to keep from loading all the images on page load. I've tried to remove the "Show All" line but that does not help. I believe this to be a js problem.
Here's my html and js:
HTML:
<div id="isotope-options">
<ul id="isotope-filters" class="clearfix">
<li>Show All</li>
<li>Recital Photos</li>
<li>Home Photos</li>
<li>Recital Videos</li>
</ul>
</div>
JS:
I couldn't fit all the js here, so here's a link:
isotope filter js
Here's the code you requested:
<li class="span3 isotope-element isotope-filter2">
<div class="thumb-isotope">
<div class="thumbnail clearfix">
<a href="gallery_images/recital_pics/1pm hippie group.jpg">
<div class="banner_inner">
<div class="banner_inner2">
<figure>
<img src="gallery_images/recital_pics/1pm hippie group - sm.jpg" alt=""><em></em>
</figure>
<div class="caption">
Group 1
</div>
</div>
</div>
<img src="images/banner_shadow.png" alt="" class="banner_shadow">
</a>
</div>
</div>
</li>
You can filter using this
$grid.isotope({ filter: '.selected' });

Bootstrap sidenav scroll

I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.

Manage complex select/deselect artis/album/song

First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks

Anchoring to the same page [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I wanted to point to a portion in the same page. So used the anchor method. But the problem is, I have a static navigational bar at the top. So the heading of the section goes below the menu bar since the anchor is set to the heading. The menu bar is of 100px height. I was wondering if there is any way we can show this heading too?
If you want more details, just let me know.
<!---NAVIGATION BAR SECTION------>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html"><img id="logo" src="img/logo.png"></a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>FEATURES</li>
<li>PRICING</li>
<li id="scroll2" class="navLog">LOGIN</li>
<li id="scroll3" class="navLog">SIGN UP FREE</li>
</ul>
</div>
</div>
</div>
<!---NAVIGATION BAR ENDS------>
This is the nav section from which I wanted to move to other portions
<div class="jumbotron action-block-green ">
<div class="container text-center">
<div class="row">
<div class="col-sm-8">
<ul class="nav navbar-nav navbar-left">
<li>TECHNOLOGY</li>
<li>SCREENSHOTS</li>
<li>FEATURES</li>
</ul>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
I anchored the first link (technology) to here
<div class="jumbotron sectionBlock white ">
<div class="container text-center">
<h2 id="technology" style="color:#202020;margin-top: 0px;">Cutting-Edge Technology</h2>
<h3>Accurate, Reliable, Scalable and Hi Performace</h3>
<p style="margin:10px 0">blabhfufwehuf wiuefh wiu hfiuw fiuw fiuwhe fiwu hfiwue fhiwuh f</p>
<div class="row" style="margin-top:20px;">
<div class="col-md-4">
<div class="certified-uptime"></div>
</div>
<div class="col-md-4">
<div class="multiple-datacenters"></div>
</div>
<div class="col-md-4">
<div class="hosteb-by"></div>
</div>
</div>
</div>
</div>
I would do the scrolling using jQuery and changing the anchors in the URL to elements that don't exist on the DOM with the same value for id or name. (so that the scroll is not done automatically)
Living demo
$(window).on('hashchange',function(){
//you can see it manually or calculate it using jQuery by using $.height();
var header = 60;
//Getting the anchor and replacing the underscore
var value = window.location.hash.replace('_', '');
//getting our destination
var dest = $(value).position();
//if the element exist on the DOM
if(typeof dest !== "undefined"){
var dtop = dest.top;
//proceeding to scroll
$('html, body').animate({
scrollTop: dtop - header
}, 1000);
}
});
The links in my example look like #_link1 and the id needed to appear in the DOM should be like id="link1:
<div id="menu">
Link 1
Link 2
Link 3
</div>
...
<h1 id="link1>Link 1</h1>
Of course, you can change the underscore (_) on the URL for any other character or symbol you want. Just make sure to replace it for an empty string on the replace statement of the code I provided.

Categories