I'm designing a menu for a photography site. What I would like is a menu that on hover does two things: pops up an individual image in line with the menu <li>, and also displays just below the menu some text that stays centered in the page, i.e. has position:fixed;. I've taken care of the first requirement, but I'm stuck as to how to achieve the text display. Here's what I've got so far...
<body>
<div id="wrapper">
<div id="menuholder"></div><!--end menuholder-->
<div id="header">
</div><!--end header-->
<div id="content">
<div id="primary">
</div><!--end primary-->
<div id="secondary">
</div><!--end secondary-->
</div><!--end content-->
<div id="spacer"></div><!--end spacer-->
<div id="footer">
<div id="nav">
<script type="text/javascript"><!--js for the menu-->
$(document).ready(function()
{
$('#menuBar li').click(function()
{
var url = $(this).find('a').attr('href');
document.location.href = url;
});
$('#menuBar li').hover(function()
{
$(this).find('.menuInfo').slideDown();
$(this).find('.menuText').slideDown();
},
function()
{
$(this).find('.menuInfo').slideUp();
$(this).find('.menuText').slideUp();
});
});
</script>
<ul id="menuBar">
<li class="firstchild">Home
<div class="menuInfo"><img src="images/link1.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO1
<div class="menuInfo"><img src="images/link2.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO2
<div class="menuInfo"><img src="images/link3.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO3
<div class="menuInfo"><img src="images/link4.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO4
<div class="menuInfo"><img src="images/link5.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO5
<div class="menuInfo"><img src="images/link6.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO6
<div class="menuInfo"><img src="images/link7.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li>PHOTO7
<div class="menuInfo"><img src="images/link8.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
</ul>
</div><!--end nav-->
</div><!--end footer-->
</div><!--end wrapper-->
</body>
Yes, the menu is in the footer. That's not a mistake ;)
#footer {
position:relative;
width:100%;
background-image:url();/*remove if not using background image*/
text-align:center;
margin:0 auto;
margin-top:-100px;
clear:both;
}
#footer h1 {
font-size:1.2em;
margin:0;
padding:10px;
}
#footer p {
padding:4px;
}
#footer a:hover {
color:#999;
}
#nav {
width:650px;
height:45px;
background-color:#000;
color:#fff;
font-size:14px;
margin:20px auto 0;
}
#nav ul {
list-style-type:none;
display:block;
}
#menuBar li {
float:left;
padding:15px;
height:16px;
width:50px;
border-right:1px solid #ccc;
}
#menuBar li a {
color:#fff;
text-decoration:none;
letter-spacing:-1px;
font-weight:bold;
}
.menuHover {
background-color:#999;
}
.firstchild {
border-left:1px solid #ccc;
}
#menuholder {
position:fixed;
width:100%;
top:656px;
}
.menuInfo {
background-color:#000;
width:74px;
height:100px;
padding:3px;
display:none;
position:absolute;
margin:-100px 0 0 -15px;
}
.menuText {
background-color:#000;
color:#fff;
padding:0;
display:none;
font-size:14px;
}
And here's how it looks, so far...
http://www.erisdesigns.net/STAGE/ScottHevener/
Try left: 0; on #menuholder it should do the trick.
Related
I have this small code and I am trying to change the background color of the field when I click on it to write, for example if I click in "email" field I want the field to turn yellow so it looks better. I searched but I don't know I couldnt find a soultion becuase I am not really familar with jquery.
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
jquery
$(document).ready(function()
{
$('.left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.row').addClass("over");
}).blur(function(){
$(this).parents('.row').removeClass("over");
});
});
css
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
.ruler{
width:400px; border-bottom:dashed 1px #dcdcdc;
}
tr:focus{
background-color:#fcfcf0;
}
td{
vertical-align:top;
}
.over{
background-color:#f0f0f0;
}
.out{
background-color:none;
}
Whoever can help me with the solution, thanks a lot.
You can get email type and add class based on that
JQuery
if( $(this).attr("type") == 'email' ){
$(this).parents('.row').addClass("email");
}
CSS
.over.email{
background-color:#FFFF00;
}
$(document).ready(function(){
$('.left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.row').addClass("over");
if( $(this).attr("type") == 'email' ){
$(this).parents('.row').addClass("email");
}
}).blur(function(){
$(this).parents('.row').removeClass("over");
if( $(this).attr("type") == 'email' ){
$(this).parents('.row').removeClass("email");
}
});
});
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
.ruler{
width:400px; border-bottom:dashed 1px #dcdcdc;
}
tr:focus{
background-color:#fcfcf0;
}
td{
vertical-align:top;
}
.over{
background-color:#f0f0f0;
}
.over.email{
background-color:#FFFF00;
}
.out{
background-color:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="email" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
You've done it right, just change the CSS rule, like this for instance:
.over{
background-color:#ffff00;
}
You can bind an event handler to the "focus" for only the email input, for example:
$(document).ready(function () {
$('[name=email]').focus(function () {
$(this).parents('.row').addClass("over");
}).blur(function () {
$(this).parents('.row').removeClass("over");
});
});
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
Not sure exactly how to put this but here goes. I have a page that I set up to show and hide divs when a certain link is clicked and everything is working fairly well apart from this. when the first two links are pressed, the div that appears becomes linked the same as the last link on the page. Likewise the third is linked the same way and also has underline and white text (as I set up for general links on the site)
The div that shows up when a link is clicked shouldn't be linked at all.
Here's my code:
HTML
<div id="wrapper">
<div id="container">
<div id="shown" class="content">
<div id="list">
<div id="filler"></div>
<div id="a1" class="inactive">WHAT IS LIGHT IT UP?</div>
<div id="spacer"></div>
<div id="a2" class="inactive">WHO</div>
<div id="spacer"></div>
<div id="a3" class="inactive">REGISTRATION FEES</div>
<div id="spacer"></div>
<div id="a4" class="inactive">WHEN</div>
<div id="spacer"></div>
<div id="a5" class="inactive">AWARDS</div>
<div id="spacer"></div>
<a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">GLOW DANCE PARTY!</div>
<div id="filler"></div>
</div>
<div id="id1" class="hidden">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>
<div id="id4" class="hidden">text 4</div>
<div id="id5" class="hidden">text 5</div>
<div id="id6" class="hidden">text 6</div>
</div>
</div>
CSS
#wrapper{width:94%; float:left; position:relative; left:3%; background-color:rgba(163,207,98,0.7); margin:auto; border-radius:1.2em;}
#container{width:96%; float:left; position:relative; left:2%; margin-top:2%;}
#spacer{background-color:rgba(0,0,0,0.7); float:left; box-shadow: -1px 1px 1px rgba(255,255,255,0.7);}
#filler{height:1.5em; width:100%;}
#list{
overflow:hidden;
float:left;
letter-spacing:1px;
font-family:upc;
font-size:1.35em;
}
#list a:link{text-decoration:none}
.active{
text-shadow: -2px 1px 1px #000;
background-color:rgba(0,0,0,0.5);
color:#A3CF62;
}
.inactive{
text-shadow: -2px 1px 1px rgba(255,255,255,0.5);
color:#000;
}
.inactive:hover{
text-shadow: -2px 1px 1px #000;
background-color:rgba(0,0,0,0.5);
color:#A3CF62;
border-radius:2em;
}
.hidden {display: none}
.unhidden {
margin-top:1.5em;
margin-bottom:1.5em;
display:block;
text-align:justify;
color:#A3CF62;
}
#shown{
float:left;
position:relative;
background-color:rgba(0,0,0,0.5);
border-radius:1.2em;
}
#media screen and (orientation:landscape){
#list{width:20%; text-align: center; position:relative; float:left; right:20%;}
#shown{width:80%; float:left; left:20%;}
#spacer {
width:90%;
margin-top:0.1em;
margin-bottom:0.1em;
margin-left:auto;
margin-right:auto;
height:0.1em;
}
#stretch{display:none}
.unhidden{width:80%; vertical-align: middle; float:left; position:relative; right:10%; overflow-y:auto;}
.active{border-top-left-radius:2em; border-bottom-left-radius:2em;}
}
JavaScript
var old_target,old_trigger;
function show(win, target, trigger){
document.getElementById(win).className = 'content';
if(old_target!==undefined) document.getElementById(old_target).className = 'hidden';
if(old_trigger!==undefined) document.getElementById(old_trigger).className = 'inactive';
document.getElementById(target).className = 'unhidden';
document.getElementById(trigger).className = 'active';
old_target = target;
old_trigger = trigger;
}
The last <a href> element is missing its closing tag, causing the browser's HTML parser to generate unexpected results. To see the unintended effect, select 'Inspect element' from the right-click menu.
I have everything working in html and jquery but what I need to do is assign and append a number to make the unique id work with the Repeater field. Here is what I have when it comes the HTML CSS and jquery. Is there a way to append a unique number (such as 1 or 2...) to the end of the #expand id in the html, with jQuery?
Here is the code I have with the help from you guys here:
#expand-1 .bio-pic2, #expand-2 .bio-pic2 {
position:absolute;
top:0;
left:0;
}
#expand-1, #expand-2 {
position:absolute;
width:1000px;
border: 1px solid black;
display: none;
background-color:#ffffff;
z-index:9999;
height:323px;
}
.bio-pic2 img {
position:absolute;
top:0;
left:0;
width:323px;
}
.testimonial {
position:absolute;
top:333px;
left:0;
font-size:15px;
}
.desc {
position:absolute;
top:10px;
left:333px;
}
.bio-pic {
float:left;
cursor: pointer;
z-index:9998;
margin:0 5px 0 0;
}
<div id="expand-1">
<div class="test">
<div class="bio-pic2">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-1" class="bio-pic">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
</div>
<div id="expand-2">
<div class="test">
<div class="bio-pic2">
<img src="http://brent-ransom.com/photo2-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-2" class="bio-pic">
<img src="http://brent-ransom.com/photo2-img.jpg" />
</div>
$(".bio-pic").click(function (e) {
e.stopPropagation();
//$('.bio-pic2').toggle("slow");
var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
$(menu).show().animate({
width: 500
}, 1000);
});
$("#expand-1, #expand-2").click(function () {
$(this).animate({
width: 0
}, 1000, function () {
$(this).hide();
});
})
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/h64CZ/4/
to change an id...
var myNum = 3;
$('#expand').attr('id', 'expand' + myNum);
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! :)