I'm using jQuery idTabs in an upcoming redesign for my website. I've styled it to my content and it looks great, but there are a couple of functions which are missing what I require.
First, here's what I'm using right now:
<script type="text/javascript">
$("#featured").idTabs("!mouseover");
</script>
Obviously, the code above means that it changes to the next tab when hovered, making clicking unnecessary.
Here's what I want to do:
1 - Have the tabs automatically changed every specified number of seconds when the user is not interacting with them.
2 - When they change, have them fade. There is actually already a function for this in idTabs:
<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>
The only problem is that it doesn't work well with the mouseover event. Rather than fading-in on each mouseover, it simply changes automatically.
Can anyone help me out with this?
It'd be greatly appreciated! Thanks!
Here i have done complete bins for changing tab automatically on some time interval without mouse over or click. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7r/2
HTML
<div>
<div id="adv2">
<ul>
<li>
<a class="selected" href="#ani1">
1
</a>
</li>
<li>
<a href="#ani2">
2
</a>
</li>
<li class="split">
</li>
<li>
<a href="#ani3">
3
</a>
</li>
<li>
<a href="#ani4">
4
</a>
</li>
</ul>
<span>
<p id="ani1">
Click on the tabs to see a nice fade.
</p>
<p id="ani2">
You're not impressed?
</p>
<p id="ani3">
But it's so cool... in a nerdy way.
</p>
<p id="ani4">
Download idTabs and have your cake. You can eat it too.
</p>
</span>
</div>
</div>
jQuery
$(function() {
var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
var current = $("#adv2 ul a.selected").attr("href");
var index = ($.inArray(current, tabList) + 1) % tabList.length;
tabClick(tabList[index], tabList, tabDiv);
}
var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
if (!tabList) {
tabList = list;
}
if (action && action.event == "click") {
timer && clearInterval(timer);
timer = setInterval(rotate, interval);
}
$("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
for (i in list) {
$(list[i]).hide();
}
$(id).fadeIn();
return false;
}
$("#adv2").idTabs(tabClick);
});
** CSS:**
body{
font: 10pt Calibri,Arial,sans-serif;
text-align: center;
color: #FFFFFF;
background: none repeat scroll 0 0 #111111;
margin: 0;
padding: 0;
}
#adv2 {
background: none repeat scroll 0 0 #181818;
margin-left:5%;
margin-top:5%;
width: 500px;
}
#adv2 ul{
display: block;
float: left;
height: 50px;
width: 50px;
margin:0px;
background:#333;
}
#adv2 li {
float: left;
}
li {
list-style: none outside none;
}
#adv2 li a.selected {
background: none repeat scroll 0 0 snow;
color: #111111;
font-weight: bold;
}
#adv2 li a {
display: block;
height: 25px;
line-height: 22px;
text-decoration: none;
width: 25px;
}
#adv2 li a:hover {
background:#0A0A0A;
}
#adv2 li.split {
clear: both;
}
a{
color: #FFFFFF;
}
a {
outline: medium none;
}
#adv2 span {
background: none repeat scroll 0 0 #181818;
float: right;
height: 50px;
line-height: 45px;
width: 410px;
}
Demo: http://codebins.com/bin/4ldqp7r/2
Related
Alright, so I'm working on my own javascript slideshow which consist of cards. Right now I'm adding/looping through the cards and adding an eventlistener (mouseover and mouseout) to check if the user hovered over chosen card.
Now to the problem. I need to be able to target all of the cards (part 1, see image) which comes before the chosen card of the user and also all of the cards (part 2, see image) which comes after. But I have to target them individually. Basically the cards in part 1 will get one kind of styling and the cards in part 2 will get another one. The chosen card will get its own styling.
This is what I have so far. If someone could point me in the right direction, that would be great, thanks. I don't want to use any libraries, strictly javascript.
var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('mouseover', function() {
//Do something
console.log('Mouseover: Do something');
});
cards[i].addEventListener('mouseout', function() {
//Do something
console.log('Mouseout: Do something');
});
}
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
You can select the particular card and apply class name using jquery.
var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('mouseover', function() {
//Do something
$(this).addClass('selected');
console.log('Mouseover: Do something');
});
cards[i].addEventListener('mouseout', function() {
//Do something
$(this).removeClass('selected');
console.log('Mouseout: Do something');
});
}
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
.selected{
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
you can even use simple css which will be comman for all the card.
when card class is hovered this css will execute.
.card:hover{
background-color: blue;
}
You can set class for group/part 1, current card and group/part 2 separately.
You can possibly also listen to bubbling phase of event instead of multiple listener registration.
Check.
let ul = document.querySelectorAll('ul')[0];
ul.addEventListener('mouseover', function(e) {
if(e.target.className.indexOf("card") === -1) { return; }
let currentFound = false;
document.querySelectorAll('.card').forEach(function(card) {
if(card === e.target) {
card.classList.add("current-card");
currentFound = true;
}
else
if(currentFound) {
card.classList.add("next-cards");
}
else {
card.classList.add("previous-cards");
}});
});
ul.addEventListener('mouseout', function() {
document.querySelectorAll('.card').forEach(
function(card) {
card.classList.remove("previous-cards");
card.classList.remove("next-cards");
card.classList.remove("current-card");});
});
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
.previous-cards {
background-color: crimson;
}
.next-cards {
background-color: darkred;
}
.current-card {
background-color: indianred;
}
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
If you would like to preserve the colors until next hovering just remove the mouseout listener and put its logic to start of mouseover listener right after if block.
I would do this with CSS and it's sibling selector:
.card {
background-color: red;
}
.card:hover ~ .card {
background-color: green;
}
If you need to use JavaScript, use [...mouseEnterCard.parentElement.children].indexOf(mouseEnterCard) to get the element index and then loop over the elements with a lower/higher index.
I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}
Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.
You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>
With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>
Making an active nav element for a menu isn't too difficult, here is an example. http://jsfiddle.net/6nEB6/38/
<ul>
<li>Home</li>
<li class="active">Deals</li>
<li>Support</li>
<li>Contact</li>
</ul>
CSS:
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
ul {
background: url(http://shared.web2works.co.uk/tmp/tab-bg-top.png) no-repeat;
height: 51px;
font-family: arial;
font-size: 14px;
}
ul li {
float: left;
height: 51px;
}
ul li a {
display:block;
background: url(http://shared.web2works.co.uk/tmp/nav-seperator.gif) no-repeat top right;
padding: 17px 20px 17px 21px;
text-decoration: none;
color: #263e60;
}
ul li:last-child a{
/*background-image: none;*/
}
ul li:first-child a{
padding-right: 75px;
}
li.active a, li:hover a {
background: #02284c;
color: #FFF;
margin-left: -2px;
padding-left: 23px;
}
What I need is a bit different. In most active states people tend to style their menu buttons so you can use the same style for every button. I need it so the buttons activate a different image for every state.
This is an image of what I'm talking about:
Those buttons have different glow effects which are all different images. When you select a different button the glow should stay active. So if I do it this way I'm not able to use the same style for every button.
The buttons change pages and the hovers work correctly, I'm just having trouble with setting the states for each button to active when it reaches it's destination page. The only state that works is the first button, the home page.
Here is my code(important bits):
<div id="wrapper">
</div>
<div class="menu" id="menunav">
<ul class="menuul">
<li><a id="home-link">Home</a>
</li>
<li><a id="work-link">Work</a>
</li>
<li><a id="about-link">About</a>
</li>
<li><a id="contact-link">Contact</a>
</li>
<li><a id="resources-link">Resources</a>
</li>
</ul>
</div>
CSS:
.menu {
height: 50px;
margin: auto;
width: 650px;
text-align:center;
padding:10px;
}
.menu ul li {
display: inline-block;
margin: 0 10px;
}
.menu ul li a {
display: block;
text-indent: -99999px;
cursor: pointer;
color: #00000;
}
#home-link {
background: transparent url() no-repeat;
width: 90px;
}
#home-link:hover, #home-link.current-item {
background:url() no-repeat;
}
#work-link {
background: transparent url() no-repeat ;
width: 90px;
}
#work-link:hover, #about-link.current-item {
background:url() no-repeat;
}
#about-link {
background:url() no-repeat;
width: 90px;
}
#about-link:hover, #services-link.current-item {
background:url() no-repeat;
}
#contact-link {
background: transparent url() no-repeat;
width: 90px;
}
#contact-link:hover, #work-link.current-item {
background:url() no-repeat;
}
#resources-link {
background:url() no-repeat;
width: 100px;
}
#resources-link:hover, #contact-link.current-item {
background:url() no-repeat;
}
.current-item {
}
JS:
function switchscrollscroll()
{
var scrolloffset = $("#wrapper").scrollLeft();
if(scrolloffset == 0 && scrolloffset <= 1999)
{
$('#menu ul li a').removeClass('current-item');
$('#home-link').addClass("current-item");
}
else if(scrolloffset >= 2000 && scrolloffset <= 3999)
{
$('#menu ul li a').removeClass('current-item');
$('#work-link').addClass("current-item");
}
else if(scrolloffset >= 4000 && scrolloffset <= 5999)
{
$('#menu ul li a').removeClass('current-item');
$('#about-link').addClass("current-item");
}
else if(scrolloffset >= 6000 && scrolloffset <= 7999)
{
$('#menu ul li a').removeClass('current-item');
$('#contact-link').addClass("current-item");
}
else if(scrolloffset >= 8000 && scrolloffset <= 10000)// Contact
{
$('#menu ul li a').removeClass('current-item');
$('#resources-link').addClass("current-item");
}
}
switchscroll();
$("#wrapper").scroll(function(){
switchscrollcroll();
});
});
Images were taken out on purpose. If anyone has done something like this before, I'd appreciate the help.
You can do this by adding a class to the body. For example if you have class work on the body of the work page then your css can look something like
.work #work-link {
background: transparent url(different image) no-repeat ;
}
#work-link {
background: transparent url(default image) no-repeat ;
width: 90px;
}
If you don't want to go around editing every page then you can use jquery to figure out which page you are on and add the appropriate class
Goal:
When you are entering the address calculation or project.html, one of the main element in the menu should be marked with a background color based on the webpage you are entering. For instance, if you are entering calculation.html the selection named Calculation (from the menu) should be selected by having a different background color compare to others.
Problem:
I don't know how to make a mark by having a background color once you
have clicked the link. I would like the code to be written in jQuery.
If possible, it would be great to add "id" in the element "a href" to change the background color.
The value "Project" and "calculation" from jQuery is the value of element title from the html code.
HTML:
<div id="nav-menu">
<ul id="kthh">
<li>Kalkylering</li>
<li>Projekt</li>
</ul>
</div>
Javascript:
$(document).ready(function()
{
var data = $('title');
if(data[0].textContent == "Project")
{
$('#kthh').closest('li').next('li').find('a').addClass("asdd");
}
if(data[0].textContent == "calculation")
{
//$('title').html('someHTML');
}
}); // ready
CSS:
/* Menu for display */
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: right;
}
#nav-menu li a
{
height: 70px;
line-height: 110px;
float: left;
padding-left: 13px;
padding-right: 13px;
display: block;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-family: Verdana;
font-weight:bold;
}
#nav-menu li a:hover { background: #AA1133;}
#nav-menu li.last-child { padding-right: 50px;}
.asdd
{
background: #AA1133;
}
I think you should not use textcontentbut text:
$(document).ready(function()
{
var data = $('title');
if(data[0].text () == "Project")
{
$('#myFirstButton').addClass("asdd");
}
if(data[0].text() == "calculation")
{
//...
}
});
You can simplify your life by adding an Id to all your button also:
<div id="nav-menu">
<ul id="kthh">
<li><a id="myFirstButton" href="calculation.html">Kalkylering</a></li>
<li><a id="mySecondButton" href="project.html">Projekt</a></li>
</ul>
</div>
I am creating a 'FAQ' page which has a list of questions at the top (links) and the answers appear below.
As each question is clicked the corresponding answer is shown (using show/hide divs). My questions is: Is there a way to make the clicked question/link bold? and for it to stay bold until another question is clicked, in which case the newly clicked question will be bold and the previously clicked question will go back to normal.
I have tried using a:active in the CSS but although this makes the text bold on clicking, as soon as you let go of the mouse it goes back to normal.
This is my CSS
div#newboxes1, div#newboxes2, div#newboxes3
{
border: 1px solid black;
background-color: #CCCCCC;
display: none;
padding: 5px;
width: 659px;
}
div#newboxes1 {
display:block;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ol#toc li {
float: left;
}
ol#toc li a img
{
border: none;
}
ol#toc a {
color: #676767;
float: left;
line-height: 2em;
text-decoration: none;
}
ol#toc li.current {
background-color: #e5e5e4;
background-position: 0 -60px;
}
ol#toc li.current a {
color: #676767;
}
ol#toc li.current a:hover {
color: #fff;
font-weight: bold;
}
div.content {
background: #e6e5e4;
padding: 20px;
width: 669px;
margin: 0px;
}
div.content a
{
color: #000000;
text-decoration: underline;
}
div.content a:active
{
font-weight: bold;
}
div.content a:visited
{
font-weight: bold;
}
This is my HTML
<ol id="toc"><li class="current"><img src="delivery_0.jpg" alt="Delivery" /></li>
<li><img src="returns.jpg" /></li>
<li><img src="contact.jpg" /></li>
<li><img src="shopping.jpg" /></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order? </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
<p>Where is my order answer</p>
</div>
<div name="newboxes" id="newboxes2">
<p>UK Standard Delivery answer</p>
</div>
Javascript function is called when each link is clicked, this shows/hides the relevant divs which are currently on top of each other.
javascript is below
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
Thanks for your help :)
Theresa
You have to add this style to your css file:
ol#toc li.current a:active {
font-weight: bold;
}
Yes, just amend your Javascript to add or remove a class. Define that class as having text-weight bold or normal.
CSS selector :active will do it. Usage same as with :hover.
using jquery something like this may work. you can substitute ".css" for ".addClass('class')" and ".removeClass('class')" in the relevant places.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').css('font-weight','normal');
$(this).css('font-weight','bold');
});
});
// or:
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').removeClass('active');
$(this).addClass('active')
});
});
</script>
should note - where "active" is your css class to style the LI. and ol#foo is your OL.