I have a page with lots of large images set to 100% width. The navigation takes you to each individual image. I want the background of the link that ties to the div that is in focus to change color either because it was scrolled to or the link was clicked.
html:
<!------ Start Header Wrapper ------>
<div class="HeadWrapper">
<!------ Start Head ------>
<div class="Head">
<!------ Logo Box ------>
<div class="Logo">
<img src="_images/nav/PrimalLogo.jpg" />
</div>
<!------ Navigation links when in mobile all links except shop will go under a menu icon. ------>
<div class="NavSpan">
Helix
Originals
Black Label
Military
Beer & Rock
Custom
Community
</div>
<div class="clear"></div>
</div>
<!------ End Head ------>
<!------ Transparent BG ------>
<div class="HeaderBG"></div>
</div>
<!------ End Header Wrapper ------>
<!------ Start Images ------>
<div id="LBHome">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBMHelix">
<img src="_images/bodyImages/02_Lookbook.jpg" />
</div>
<div id="LBWHelix" class="theme-default">
<div id="slider" class="nivoSlide">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
<img src="_images/bodyImages/02_Lookbook.jpg" />
<img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
</div>
<div id="LBMOriginals">
<img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
<div id="LBWOriginals">
<img src="_images/bodyImages/04_LB_Helix.jpg" />
</div>
<div id="LBBlackLabel">
<img src="_images/bodyImages/05_LB_Helix.jpg" />
</div>
<div id="LBMilitary">
<img src="_images/bodyImages/06_WMS-Helix.jpg" />
</div>
<div id="LBBandR">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCustom">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCommunity">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
css:
body {
line-height: 1;
background:#1e1e1e;
}
* {
margin:0 auto!important;
padding:0 auto!important;
}
img {
width:100%;
border: none;
}
a {
font-family:Helvetica, Arial, sans-serif !important;
font-size:13px;
line-height:18px;
color:#B70809;
}
a:link, a:visited {
color:#b70809;
text-decoration:none;
outline:none;
outline-width:0;
border-width:0;
}
a:hover, a:active {
color:#7c7c7c;
}
/*------------------------------------*\
Header
\*------------------------------------*/
.HeadWrapper {
width:100%;
height:80px;
z-index:100;
clear:both;
position:fixed;
border-bottom:1px #1e1e1e solid;
top:0;
left:0;
}
.HeaderBG {
position:absolute;
top:0px;
left:0px;
width:100%;
height:80px;
background-color:#1e1e1e;
z-index:101;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:.7;
}
.Head {
position:relative;
width:1000px;
height:80px;
z-index:105;
display:block;
}
.Logo {
width:86px;
float:left;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
.NavSpan {
float:left;
}
.NavSpan a {
font-family:Helvetica, Arial, sans-serif !important;
font-size:14px;
line-height:18px;
color:#FFFFFF;
text-transform:uppercase;
line-height:80px;
margin-left:40px !important;
letter-spacing:1px;
}
.NavSpan a:focus {
background:#b70809;
}
.NavSpan a:active {
background:#b70809;
}
I tried doing it with an :focus or :active tag. I know there is a lot that I can do with JavaScript but I was attempting to leave out any JavaScript if possible. I desire that when a user scrolls down the page the red box under the nav item moves with the section they are in. I know I can do it with a parallax scroller or by getting window position and setting actions to happen at certain positions just wasn't sure if there was an easier way to do this.
Try this function. It will change the CSS background-color of the div when a click is made on the image, you can change that to anything!
$('document').ready(function () {
$('img').click(function () {
$('div').css('background-color', '#hexcode');
});
});
Remember: Show us your code first! Tell us what you were doing and what went wrong. We will help you. Instead these guys are going to downvote you buddy. Try to keep this in mind for the next question as this not a freelancer site. Its a Q&A site, you ask about what is wrong we tell! That's how it goes. Also, I would like to advise you to go to this site and learn some jQuery. jquery.com. You need to polish your JavaScript talent! :)
Related
I just tried making a script that fades in a tooltip when you hover a link, image etc.. Everything works fine except the actual fading in of only one tooltip at a time. If it was not clear what i mean: I want to hover an image and show a tooltip right above the image, every other tooltip on the page should not be visible. I know what my mistake is (The hovering of an image fades all tooltips in, because they all have the same class) but i don't know how to fix it. I hope I explained my problem properly and would be very happy if someone could help me. (Please excuse me if my english isn't the best, it is obviously not my mother tongue)
Here is my Code:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});
.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}
<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>
And here is my Code in Action on jsfiddle.net:
https://jsfiddle.net/3y8pcv69/
You are selecting all .tooltips when you can just select the previous element from your button which IS the tooltip. So just do:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
Fiddle
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
I can't seem to center my image slider, seems like an easy fix but I can't get it to center dead in the middle of my page (centered left & right, centered top and bottom) Any suggestions?
The image slider is #logo-and-slider in the CSS
Heres the jsfiddle: http://jsfiddle.net/gZDVL/13/ (thanks to #MaggiQall)
And here is a live link to it: http://jtcraddock.ie/boards/
I don't understand.
Is this your desired result?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>
I closed your img-tags. with />
http://jsfiddle.net/gZDVL/2/
I am not very sure about whether you want to include the logo in the content to be centered. I have shown the idea below. I have added some borders to clearly display how the elements are laid out. If you don't want to include logo remove it from the HTML structure. Basically what I have done is placed the content in a table-cell element with the content center aligned horizontally with middle vertical alignment. That places the content at "dead center" as you wanted :-) See the fiddle at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}
Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more..
I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}
You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
I don't understand your question properly. But if you are trying to make different div elements visible upon clicking different links, then this is what you should do:
<div id = "anchor-div">
<ul>
<li> <a id="about-anchor" href="javascript:;"> About</a> </li>
<li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
</ul>
</div>
<div id="content-div">
<div id="about-content"></div>
<div id="help-content"></div>
</div>
$(document).ready(function(){
//if you wish to keep both the divs hidden by default then dont forget to hide //them
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#help-content").show();
$("#about-content").hide();
});
});
Also don't forget to add jQuery library.
I'm using the SlidesJS product example found here http://slidesjs.com/examples/product/
I want to have more than 1 of these units on the page, but when just copying the markup for it and pasting below doesn't work right. The first one will show up fine, but the second one only shows the 2 pagination elements and are unclickable. My main question is why would my approach of just copying the slider again not work, and is my general approach totally wrong? Is there some quirk with SlidesJS or Jquery in general that requires me to create separate css divs or something like that?
HTML:
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp1.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp3.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
CSS:
#containerSlides {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
float:left;
}
#products_example {
width:600px;
height:282px;
position:relative;
}
/*
Slideshow
*/
#products {
margin-left:26px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#products .slides_container {
width:360px;
/*overflow:hidden;*/
float:left;
position:relative;
border:1px solid #dfdfdf;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:360px;
height:268px;
display:block;
}
/*
Next/prev buttons
*/
#products .next,#products .prev {
position:absolute;
top:127px;
left:0;
width:21px;
height:0;
padding-top:21px;
overflow:hidden;
display:block;
z-index:101;
}
#products .prev {
background:url(../img/arrow-prev.png);
}
#products .next {
left:398px;
background:url(../img/arrow-next.png);
}
/*
Pagination
*/
#products .pagination {
width:55px;
padding:5px 5px;
float:left;
margin-left:30px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#products .pagination li {
float:left;
margin:2px 4px;
list-style:none;
}
#products .pagination li a {
display:block;
width:55px;
height:41px;
margin:1px;
float:left;
background:#f9f9f9;
}
#products .pagination li.current a {
border:1px solid #7f7f7f;
margin:0;
}
Without seeing the javascript its impossible to say exactly where the issue is, however there are some immediate issues with the markup.
You have multiple elements on the page with the same id's (containerSlides, products_example, products).
Giving the second container unique id's will help solve the problem. You will then probably (again, cant say for sure without seeing the javascript) need to add another 'initialization' call to set up slidesjs on the second container as well as adding the id to your css so that the second container gets the same styling.
Ex:
Markup
<code>
<div id="secondContainerSlides">
…
</div>
</code>
Css
<code>
#containerSlides,
#secondContainerSlides{
…
}
</code>