Good Day,
I'm having a real weird issue with my site. What I am attempting to do is place a Time.ly Calendar widget in one panel of my accordion. If you look at this page under "TOURNAMENTS: http://www.rthhockey.com/onehockey It is rendering exactly as I would like it to. The problem is that if you look here, http://www.rthhockey.com/tcs-hockey, I am just copying and pasting the code from the working page, and simply replacing the calendar script and it is not scrolling as expected. On yet another page, http://www.rthhockey.com/canlan, it's only scrolling a portion of what it should be. Essentially, the calendar script is the only thing changing, that I can tell. It's just the organizer numbers that are changing. It's very odd to me but, maybe some of you pro's might have an easy solution. I have tried playing with the height of the panel and accordion to no avail. Thank you in advance for any assistance you might be able to offer.
CSS
.ac-container {
max-width: 810px;
}
.ac-container label {
height: 50px !important;
line-height: 50px !important;
font-size: 26px !important;
font-family: 'Open Sans';
padding: 5px 15px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #ff6600;
line-height: 50px;
font-size: 26px;
background: #ffffff;
font-size: 26px;
height: 30px;
line-height: 50px;
border: 1px solid #ff6600;
}
.ac-container {
width: 100%;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label:hover {
background: #fff;
}
.ac-container input:checked + label,.ac-container input:checked + label:hover {
background: #ffffff;
color: #ff6600;
height: 30px;
line-height: 21px;
font-size: 13px;
}
.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: none;
}
.ac-container input:checked + label:hover:after {
background-image: none;
}
.ac-container input {
display: none;
}
.ac-container article {
background: #ffffff;
margin-top: -5px;
overflow: hidden;
height: 0;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.ac-container article p {
font-style: normal;
color: #494949;
line-height: 23px;
font-size: 10px;
padding: 5px;
font: normal normal 12px 'Open Sans';
}
.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small {
height: 390px;
}
.ac-container input:checked ~ article.ac-medium {
height: 420px;
}
.ac-container input:checked ~ article.ac-large {
height: 230px;
}
div.scroll {
max-height: 1250px;
overflow: auto;
}
.timely-stream:not(.timely-agenda) .timely-event {
min-height:92px; !important
}
.timely-title-text,
.timely-details-container{
font-size:67%;
}
HTML
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" >
<label for="ac-1">TOURNAMENTS</label>
<article class="ac-small">
<div class="scroll">
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>
</div>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" checked="">
<label for="ac-2">OneHockey</label>
<article class="ac-medium">
<img src="https://i.imgur.com/HJwXuym.png?2" title="OneHockey Events" />
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3">INFO</label>
<article class="ac-large">
Blah, blah, blah
</article>
</div>
</section>
The 3 differnt script codes that I've used with the 1st being the one that is working:
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=26034&organizers=46341" data-max-height="0" id="timely_script" class="timely-script"></script>
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>
this div needs to have 'overflow: scroll' applied to it.
article class="ac-small"
example:
article.ac-small {overflow: scroll;}
Related
I need to activate my HTML/ CSS 'Toggle Switch' using JavaScript.
I'd like the DIV with text to be hidden by default, and when the slider (switcher) is swiped to the left then it 'triggers' the DIV to be 'shown' using JavaScript.
I how that I am on the right path but there's just something not quite right with my action...
function toggleDiv() {
var triggeredDiv = document.querySelector('.triggeredDiv');
if (document.getElementById('flipswitch').checked) {
triggeredDiv.classList.remove('shown');
} else {
triggeredDiv.classList.add('shown');
}
}
document.getElementById('flipswitch').addEventListener("change", toggleDiv);
.flipswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before,
.flipswitch-inner:after {
float: left;
width: 50%;
height: 60px;
padding: 0;
line-height: 60px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "MONTHLY";
padding-left: 12px;
background-color: #FFFFFF;
color: #888888;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-inner:after {
content: "BY COUNTRY";
padding-right: 12px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-switch {
width: 45px;
margin: 7.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 139px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-switch {
right: 0;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="flipswitch">
<input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>
<label class="flipswitch-label" for="fs">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
The problem here is that you are trying to reference the flipswitch by an id of flipswitch while you gave the switch an id of fs. The references in the javascript just have to be changed to be:
document.getElementById('fs')
instead of
document.getElementById('flipswitch')
Instead of using document.getElementById you should be using something to get the elements by class, since that is what's defined in your markup.
Additionally, your input checkbox isn't toggling checked, it's simply toggling the state of the triggered div.
We can make this work by adjusting the code:
function toggleDiv() {
this.element || ( this.element = document.querySelector('.triggeredDiv') );
this.element.classList.toggle("shown");
}
With comments for better understanding:
function toggleDiv() {
/*
if we don't have a reference in `toggleDiv.element`
we use `document.querySelector` to retrieve
and save the reference to the element `.triggeredDiv`
this ensures that we only go through the DOM once to retrieve the element
no matter how many times the function is called
which is more performant.
*/
this.element || (this.element = document.querySelector('.triggeredDiv'));
/*
after we have the element, we simply toggle the `shown` class
using the `classList.toggle` method.
*/
this.element.classList.toggle("shown");
}
document.querySelector('.flipswitch').addEventListener("change", toggleDiv);
function toggleDiv() {
this.element || ( this.element = document.querySelector('.triggeredDiv') );
this.element.classList.toggle("shown");
}
document.querySelector('.flipswitch').addEventListener("change", toggleDiv);
.flipswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before,
.flipswitch-inner:after {
float: left;
width: 50%;
height: 60px;
padding: 0;
line-height: 60px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "MONTHLY";
padding-left: 12px;
background-color: #FFFFFF;
color: #888888;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-inner:after {
content: "BY COUNTRY";
padding-right: 12px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-switch {
width: 45px;
margin: 7.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 139px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-switch {
right: 0;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="flipswitch">
<input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>
<label class="flipswitch-label" for="fs">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
I think if you just change the two instances of document.getElementById('flipswitch') to document.getElementById('fs') in your function your code works fine.
JSFiddle Example: https://jsfiddle.net/oq8wL2v4/
I built a sliding down search box. When you press the search icon a search box drops down, and if you press the search icon the search box will disappear again. I want another way for people to exit the search box besides just clicking on the search icon again. I also want to be able to exit the search box by clicking anywhere else on the screen besides the search box. How would I do this?
jsfiddle - https://jsfiddle.net/pkhj0frp/
jQuery('.search-icon').on('click', function() {
jQuery('.search-form').toggleClass('search-visible');
});
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-icon {
float: right;
line-height: 70px;
cursor: pointer;
margin: 0px 34px;
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(20% + 1px);
transform: translateX(-50%);
left: 50%;
width: 100vw;
}
.search-form.search-visible {
opacity: 1;
height: 110px;
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5;
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0;
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none;
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd;
}
.search-form .input-group {
margin-left: 18px;
position: relative;
width: 100%;
margin-top: 10px;
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #000 solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none !important;
width: calc(100% - 36px) !important;
font-size: 50px;
font-family: 'freightlight';
font-style: italic;
text-transform: uppercase;
color: #000;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
-webkit-font-smoothing: antialiased;
}
.search-form .form-control:focus {
background: #fff !important;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-icon"><img src="https://www.nature.org/cs/groups/webasset/documents/webasset/search-icon.png"></div>
<form role="search" method="get" class="search-form form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
I create exit the search box by clicking anywhere else on the screen and keypress shortcut.
jQuery('.search-icon').on('click', function(e) {
e.stopPropagation();
jQuery('.search-form').toggleClass('search-visible');
});
$(window).bind('keydown', function(e) {
e.preventDefault()
var keyCode = e.keyCode || e.which;
if (keyCode == 117) {
$('.search-form').toggleClass('search-visible');
}
});
$(document).click(function() {
$('.search-form').removeClass('search-visible');
})
I am breaking my head to get the div content to slide before appearing when I hover over the relevant item that is suppose to change the content of the div dynamically using jquery. The content just changes but I would like them to slide, I have tried various things but in vain.
Please excuse me if my question is silly, I am new to Jquery.
HTML
<div class="servdescripitems">
<h3>Heading 1</h3>
<p>Paragraph of first service</p>
<ul>
<li>Heading 1 list 1</li>
<li>Heading 1 list 2</li>
</ul>
<div class="button">Service 1</div>
</div>
<ul class="serviceslist">
<li class="service1"></li>
<li class="service2"></li>
<li class="service3"></li>
</ul>
Jquery
$('.service1').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
});
$('.service2').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 2</h3><p>Paragraph of second service</p><ul><li>Heading 2 list 1</li><li>Heading 2 list 2</li></ul><div class="button">Service 2</div>');
});
$('.service3').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 3</h3><p>Paragraph of second service</p><ul><li>Heading 3 list 1</li><li>Heading 3 list 2</li></ul><div class="button">Service 3</div>');
});
CSS
.servdescripitems {
width: 100%;
height: 400px;
}
.servdescripitems h3 {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15pt;
color: #ed1f24;
margin-bottom: 10px;
}
.servdescripitems p {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
margin-bottom: 15px;
}
.servdescripitems ul{
list-style-image: url("../images/servicelist.png");
padding-left: 30px;
}
.servdescripitems li {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
padding-bottom: 5px;
}
.button {
border-top: 1px solid #7e7e7e;
background: #3b363b;
background: -webkit-gradient(linear, left top, left bottom, from(#7e7e7e), to(#3b363b));
background: -webkit-linear-gradient(top, #7e7e7e, #3b363b);
background: -moz-linear-gradient(top, #7e7e7e, #3b363b);
background: -ms-linear-gradient(top, #7e7e7e, #3b363b);
background: -o-linear-gradient(top, #7e7e7e, #3b363b);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-family: 'Lato', sans-serif;
font-size: 11pt;
font-weight: bold;
text-decoration: none;
text-align: center;
width: 150px;
height: 20px;
margin: 5px auto;
}
.button:hover {
border-top-color: #ed1f22;
background: #ed1f22;
color: #ffffff;
cursor: pointer;
}
.button:active {
border-top-color: #ed1f22;
background: #ed1f22;
}
.serviceslist {
width: 80%;
margin: 0 auto;
}
.serviceslist li {
margin-bottom: 3px;
margin-right: 30px;
float: left;
}
.service1 {
background: rgba(0, 0, 0, 0) url("../images/service1.png") no-repeat scroll 0 0;
background-position: 0 0;
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service2 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service3 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
I have fiddled the script here
with jQuery the simplest slides are Up and Down as they are built-in.
I've added a div inside your current service details container, so the container's size is not affected when sliding content in/out
This is how I've updated each of your mouseover functions:
$('.service1').mouseover (function() {
//check if current service shown is not the same - this avoids sliding to same content
if(inside_div.attr("current-service")!="1"){
//slideUp current content
inside_div.slideUp(function(){
//once slideUp is finished, change the content of the inside div...
inside_div.html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
// ... then tell the div what service content it now has, and slide it back down
inside_div.attr("current-service","1").slideDown();
});
}
});
Here's an updated fiddle:
https://jsfiddle.net/g66aa0oo/
Let me know if any further explanation is needed.
Also See: https://api.jquery.com/slideUp/
If you really want left/right sliding, I'd recommend looking at a carousel effect plug-in such as slick
I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:
You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/
Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.
In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.
http://i.imgur.com/SXgTt.png
You see removing these two will make the image work, but it don't stick to the footer when viewed in browser
here's how its look like
http://i.imgur.com/gdBMr.png
and here's the css with html
<style>
body {
text-align: center;
background-color: #080707;
font-family: "Open Sans", sans-serif;
}
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px auto 0;
text-decoration: none;
position:fixed;
bottom:23px;
}
.enter:hover {
background: #cf2f32;
color: white;
-webkit-transition: background 0.4s ease, color 0.4s ease;
-moz-transition: background 0.4s ease, color 0.4s ease;
-o-transition: background 0.4s ease, color 0.4s ease;
-ms-transition: background 0.4s ease, color 0.4s ease;
transition: background 0.4s ease, color 0.4s ease; }
</style>
<body>
<p><img src="images/fullbg.png" style='width:100%; max-width: 800px;' border="0" alt="Null"></p>
Enter
</body>
I don't think you can use the auto margins trick if the element is set to position fixed. But you can have it this way:
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px 0 0 -82px;
text-decoration: none;
position:fixed;
left: 50%;
bottom:23px;
}
Just set the left margin to be half of the element's width.
I cant see images, buy you can try;
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 0 0 0 -83px;;
text-decoration: none;
position:fixed;
bottom:23px;
left:50%;
}