i am trying to do a single page navigation, but unable to show and hide other containers.
basicall, it is 3 links . i capture the click event and set the appropriate container hide or show with sliding effect.
code is shown below. Thanks for help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.current
{
display: block;
}
#about_container, #principles_container, #programs_container
{
display: none;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id^=btn_]').click(function (event) {
event.preventDefault();
//here you can also do all sort of things
var elementToShowId = this.id;
elementToShowId = elementToShowId.replace("btn_", "") + "_container";
alert(elementToShowId);
if ($('.current').exists()) {
$(".current").hide('slide', { direction: 'right',
complete: function () {
show(elementToShowId);
$(this).removeClass('current');
}
}, 500, null);
}
else {
show(elementToShowId);
}
if ($('.active').exists()) {
$(".active").removeClass('active');
}
$(this).addClass('active');
});
});
function show(elementId) {
$("#" + elementId).show('slide', { direction: 'left', complete: function () {
$(this).addClass('current');
if (elementId == "contact") {
initializeMap();
}
}
}, 500, null);
}
</script>
</head>
<body>
<ul>
<li><a id="btn_about" href="#about"><strong>About</strong></a></li>
<li><a id="btn_principles" href="#principles"><strong>Principles</strong></a></li>
<li><a id="btn_programs" href="#programs"><strong>Programs</strong></a></li>
</ul>
<div id="home_container" class="current">
Home</div>
<div id="about_container">
about</div>
<div id="principles_container">
principles</div>
<div id="programs_container">
programs</div>
</body>
</html>
U can try this:
#about_container, #principles_container, #programs_container
{
display: none !important;
}
Related
I am trying to build a basic tab-navigation. When I hover about a tab (step), then the background of the tab gets green.
But after several hovers/resizes of the browser, hover doesnt't work anymore. Then I have to click on the tab in order to get the green background. It kind of freezes.
Thats the jsFiddle:
https://jsfiddle.net/rob_the_mob_87/L84kyym1/
Here is my minimal code:
index.html
<html>
<head>
<title>Tabs</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/static.js">
</script>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>
</body>
</html>
main.css
.process_step{
}
.active{
background-color: green;
}
static.js
$(document).ready(function () {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function () {
$('.process_step').each(function() {
$(this).hover(function () {
var clickedStepId = $(this).attr('id');
openStep(clickedStepId);
});
});
}
this.openStep = function (clickedStepId) {
$('.process_step').each(function() {
var stepId = $(this).attr('id');
if (stepId == clickedStepId) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
check this snippet below. i think it is what you want..
$(document).ready(function() {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function() {
$('.process_step').each(function() {
$(this).on('mouseenter',function() {
$(this).addClass('active');
});
$(this).on('mouseleave',function() {
$(this).removeClass('active');
});
});
}
.process_step {}
.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>
Hi I am trying to open one div on mouse hover of second div.
The div 1 is display is none by default but when user hover on div 2 the div 1 will be displayed.
But it's not working.
My code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.testtmpblock{
display: none;
background-color: black;
height: 100px;
width: 100px;
}
.tmpd{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).find(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).find(".testtmpblock").hide();
});
});
</script>
</head>
<body>
<div class="tmpd">
kjkjkj
</div>
<div class="testtmpblock">
data
</div>
</body>
</html>
div testtmpblock will be appear on hover of div tmpd but it's not working.
I have also write Script for it.
Any guidance that where I am wrong ?
You need to use next instead of find as find is used for desendants and your required element is not descendant.
Live Demo
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
});
You can avoid next if only single element has class testtmpblock
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(".testtmpblock").hide();
});
});
If the divs are next to each other you do this with CSS only:
.testtmpblock {
display: none;
}
.tmpd:hover ~ .testtmpblock {
display: block;
}
If you want to animate it you can use CSS3 transitions.
99% of time you can get away with CSS only, and the animations will be faster with transitions. It's all about how you handle the markup. If you make the hidden element a child then it's always doable with just CSS, for example:
<div class="tmpd">
kjkjkj
<div class="testtmpblock">
data
</div>
</div>
And you'd use a selector like so:
.tmpd:hover .testtmpblock {}
try next()
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
$(document).ready(function () {
$('body').on('hover','.tmpd', function () {
$(".testtmpblock").show();
}, function () {
$(".testtmpblock").hide();
}
);
});
I'm looking to load a text file into a content div when the user selects a tab, the content is being inserted into the HTML file but the content div is being set to style="display: none;.
How can I get it to set the display to block whenever the relevant tab is selected and set all other contents divs to hide?
JQuery:
$(document).ready(function() {
function resetTabs() {
$("#content > div").hide();
$("#tabs a").attr("id", "");
}
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0, 4);
(function () {
$("#content > div").hide();
$("#tabs li:first a").attr("id", "current");
$("#content > div:first").fadeIn();
$("#tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") {
return
}
else {
resetTabs();
$(this).attr("id", "current");
$($(this).attr('name')).fadeIn();
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current");
$(myUrlTab).fadeIn();
}
}
})()
});
$(document).ready(function() {
$("#tabContent1").load("test.txt");
$('a[name="#tab2"]').click(function() {
$("#tabContent2").load("test.txt");
});
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/common.css" />
<script src="JS/common.js"></script>
<title></title>
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>Specifications</li>
<li>Gallery</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
</body>
</html>
I'm also getting the following error:
Uncaught TypeError: Object #tabContent2 has no method 'fadeIn'
i
st.event.dispatch
st.event.add.y.handle
How are tabContent and the tab connected? Try setting the name of the tabs to the actual content id's like this:
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>Specifications</li>
<li>Gallery</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
This way your function $($(this).attr('name')).fadeIn(); should work a little bit better.
try this for your fadeIn
var title = $('#current').attr('name');
$(title).fadeIn()
instead of
$($(this).attr('name')).fadeIn();
(oops check edit)
Got it working using a combination of #Jaco Koster JSFiddle and the following JQuery.
$(document).ready(function () {
$("#tabContent1").load("test.txt");
$('a[name="#tabContent1"]').click(function () {
$("#tab2").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent1").load("test.txt");
$("#tabContent1").show();
$("#tabContent2").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent3"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab2").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent3").load("test3.txt");
$("#tabContent3").show();
$("#tabContent1").hide();
$("#tabContent2").hide();
$("#tabContent4").hide();
});
$('a[name="#tabContent4"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab2").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent4").load("test4.txt");
$("#tabContent4").show();
$("#tabContent1").hide();
$("#tabContent2").hide();
$("#tabContent3").hide();
});
});
I have an image in a html document and when the webpage loads i want the image to bounce. I have a jquery function that does this only when the image is clicked on. I can't figure out how to make this work onLoad...
Here is the code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
});
</script>
</head>
<body>
<div id="logo"><img src="http://visionhelp.files.wordpress.com/2012/01/soccer-ball.jpg"/> </div>
</body>
</html>
Thanks for checking this out. Much appreciated! :)
$(document).ready(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
or, using a more modern style of document ready function:
$(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
This work for you:
$(window).load(function() {
$('#logo').effect("bounce", {
times: 4,
distance: 200
}, 400).click(function() {
$(this).effect("bounce", {
times: 4,
distance: 200
}, 400);
});
})
With a jsFiddle example
Just trigger the click event on page load. Try this
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
})
.click();//Will trigger the click event on page load
});
If you don't want this effect on logo click but just on page load then use this.
$(document).ready(function() {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
I have a grid with an template column and in that column I have text and icon,
on icon mousehover (on mode) and mousehoverout (off mode) I am changing the icon.
Now when the user click on icon it opens a popup and the icon must be in "On" mode but if the user without closing clicks another row's icon then previous must be in off and current should be in on mode.
So for that I have written this:
<DataItemTemplate>
<div class="floatLeft titleBlock">
<a href="<%# Eval("Link") %>" class="ellipsesTooltip"><span>
<%# Container.Text%></span><%# Container.Text%></a></div>
<div class="floatRight">
<a onclick="GridValueCatcherMoreLike(this, '<%# Eval("ResearchNoteId").ToString()%>');">
<img alt="+/- 30 days matching Author, Industry, Theme" src="../Image/Research/MoreByOff.gif" onClick="check(this,'../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOn.gif');"
onmouseover="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOff.gif');"
onmouseout="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOff.gif', '../Image/Research/MoreByOff.gif');" />
</a>
</div>
function check(sender, onImg, offImg) {
debugger;
for(var i=0;i<activeImgList.length;i++)
{
if(sender!=activeImgList[i])
activeImgList[i].scr = offImage;
else
activeImgList[i].scr = onImg;
}
return true;
}
function ToggleAuthorMoreLikeImage(sender, popupname, imageurl, offImageurl)
{
var win = ResearchPopup.GetWindowByName(popupname);
if (!ResearchPopup.IsWindowVisible(win))
{
sender.src=imageurl;
activeImgList[arrayIndex]=sender;
arrayIndex = arrayIndex + 1;
}
else
{
activeImgList[arrayIndex] = sender;
arrayIndex = arrayIndex + 1;
return;
}
}
Why not take a step back and use something like jQuery.toggleClass() or jQuery.hover() on the client side?
.hover()
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
.toggleClass()
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>