Develop Reference

How to put div over canvas

There is canvas tag. I have Menu with sub menu on that canvas. When user click on Setting, sub menu was showed. Sub menu was show over canvas but if i click on sub menu calling canvas click event.
<div id="canvas">
<ul class="toolBarul" id="toolBar">
<li class="toolBarli">
<a class="button" onclick="toggleSetting()">Setting</a>
<ul id="SettingWrap">
<li><input id="rainControl" type="checkbox" onchange="rainControl(this)"><label>rain<span class="chktoc"></span></label></li>
<li><input id="flameControl" type="checkbox" onchange="flameControl(this)" checked="checked"><label>flame<span class="chktoc"></span></label></li>
</ul>
</li>
<li class="toolBarli" style="float: right;padding: 4px;">
<img src="images/Logo.png" />
</li>
</ul>
</div>
#SettingWrap{
display:none;
width: 280px;
height:308px;
top: 100%;
position: absolute;
z-index: 598;
list-style: none;
margin: 0;
padding: 0;
background: rgba(0, 40, 58, 0.91);
padding: 5px;
}
#SettingWrap li {
width: 267px;
height: 40px;
line-height: 40px;
vertical-align: middle;
padding: 5px 10px;
color: #9dd702;
}
According to this article, i write below code but don't work:
$("#SettingWrap").on("mousedown", function (e) {
e.preventDefault();
});

As #Mosh Feu said in comments, I call event.stopPropagation() before click event of canvas and it solved my problem.

Switch visible div based on user click

so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!

This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}

You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>

You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!

You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.

I want to make my section(contents 1~4) swap when I click each navigation elements. [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>

Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)

You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.

jQuery tabs widget display issue

I'm having difficulty with the rendering of a jQuery tabs widget. In this Fiddle you will see two images. If you click the Professional Advisers image, a tabs widget is displayed. If you click on the Industry widget, a jQuery modal dialog is rendered.
The problem is how the tabs widget displays - it should open neatly in an area below the images, as does the modal dialog. I'm unsure whether it's a CSS issue (I've tried styling the #tabs element in various ways without success) or whether I need to shuffle my s around (I;'ve tried putting the #tabs div inside the professional advisers div without success).
HTML
<a href="#" id="professional-advisers-image">
<div class="circle hovershadow advisers advisers-box-shadow text">Professional
advisers</div>
</a>
<a href="#" id="industry-image">
<div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>
<div id="tabs">
<ul>
<li>Law firms
</li>
<li>Accounting and audit firms
</li>
<li>Management consultants and economists
</li>
<li>
<button id="closeTabs">X</button>
</li>
</ul>
<div id="tabs-1">
<p>Law firm text goes here</p>
</div>
<div id="tabs-2">
<p>Accounting and audit firm text goes here</p>
</div>
<div id="tabs-3">
<p>Management consultants and economists text goes here.</p>
</div>
</div>
<div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div>
Javascript
$("#tabs").tabs().hide();
$("#professional-advisers-image").click(function () {
$("#tabs").toggle();
});
$("#closeTabs").click(function () {
$("#tabs").hide();
});
$("#industry-dialog").dialog({
autoOpen: false
});
$("#industry-image").click(function () {
$("#industry-dialog").dialog("option", "modal", true);
$("#industry-dialog").dialog("option", "height", "auto");
$("#industry-dialog").dialog("option", "width", 600);
$("#industry-dialog").dialog("open");
});
CSS
.circle {
width: 220px;
height: 220px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;
/* text styling for circles - see also the .text style below */
font-size: 35px;
color: #FFF;
line-height: 220px;
text-align: center;
font-family: Ubuntu, sans-serif;
}
#dialog #tabs {
font-family:'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em;
}
.advisers {
background: #5E2750;
margin-left: 28%;
margin-right: 13%;
}
.advisers-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.industry {
background: #DD4814;
}
.industry-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.hovershadow:hover {
box-shadow: 0px 0px 4px 4px #AEA79F
}
.text {
/* used by professional advisers circle */
line-height: 40px;
padding-top: 70px;
height: 150px
}

Try a clearing div after your circles:
http://jsfiddle.net/JWgRB/2/
<a href="#" id="professional-advisers-image">
<div class="circle hovershadow advisers advisers-box-shadow text">Professional
advisers</div>
</a>
<a href="#" id="industry-image">
<div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>
<div style="clear: both;"></div>
<div id="tabs">

dropdown menu for asp.net website

I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed

I have had good experiences with the Kendo UI menu by Telerik.

searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu

I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.

use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx

A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})​
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO
​