I want to highlight (transparent color with border smaller than the image tab) my menu items using hover through javascript. But, I can't seem to get it right. As an dded effect, when the menu tab is clicked, I want to have a bouncing animation for my image tab. Can this be done?
Here's my javascript code.
<script type="text/javascript">
$(function () {
$("img").hover(
function () {
$(this).addClass('highlight');
},
function () {
$(this).removeClass('highlight');
});
});
HTML:
<ul class="menu_tab">
<li><img src="images/top_menu_tabs/kaiiki.jpg" alt="tab1" />
<div class="highlight"></div>
</li>
</ul>
CSS:
ul.menu-tab
{
z-index:0;
list-style:none;
overflow:hidden;
margin:0px;
padding:0px 0px 0px 10px;
}
ul.menu-tab li
{
display:block;
color:#ffffff;
margin-right:0px;
margin-bottom:0px;
position:relative;
overflow:hidden;
cursor:pointer;
}
ul.menu-tab a
{
display:block;
width:60px;
height:50px;
overflow:hidden;
border:0;
}
ul.menu-tab a:hover
{
color:green;
background-color:#ccffcc;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
width:50px;
border:20px solid green;
}
.highlight
{
color:Green;
width:auto;
width:auto;
padding:0;
}
The image I want to achieve is something like this: http://www4.kaiho.mlit.go.jp/CeisNetWebGIS/
Here are some more examples brainjar Demo More from Brainjar
Related
I am pretty new to HTML, Java, and CSS and have been working on getting hovering elements to appear in different regions in a webpage. I have created this jfiddle which shows what I have thus far:
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
<head>
* {
margin:0;
padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
display:block;
border:none;
}
.outer {
width:760px;
margin:auto;
border:1px solid #000;
padding:10px 10px 20px;
position:relative;/* stacking context*/
overflow:auto;
}
.outer2{
width:1000px;
margin:auto;
border:1px solid #000000;
position:relative;
}
.image-holder {
float:right;
margin:86px 10px 10px 0;
width:500px;
height:400px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
border:1px solid #000;
border-bottom:none;
width:100px;
}
.links li {
width:100px;
background:blue;
color:#fff;
border-bottom:1px solid #000;
}
.links li a {
display:block;
width:90px;
padding:5px;
background:blue;
color:#fff;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:500px;
height:400px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
background:teal;
color:#000;
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
h1 {
text-align:center;
margin:1em 0;
}
</style>
</head>
<div class="outer2">
<b>list moves here</b>
<div class="outer">
<p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
<ul id="all" class="links">
<li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
</ul>
<ul id="over" class="links">
<li>Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></li>
<li>Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></li>
</ul>
</div>
</div>
https://jsfiddle.net/qbrnuwe6/6/
One can hover over 'Google', and an image appears in the box in the bottom-right. Similarly, if one hovers over 'Yahoo', a different image appears in the box in the bottom-right.
However, now, I want to create a checkbox that, when checked, the list of 'Google' and 'Yahoo' will appear outside of the 'inner box' and populate the area where it says 'list moves here'. I was hoping this could be achieved by some function such as:
<input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all
One should be able to still hover over 'Google' and 'Yahoo' to make the image appear in the bottom-right For some reason I am stuck on how to move the list properly. I am not sure if this would work better with HTML, Java, or CSS, so any sort of help would be appreciated.
If I understood you correctly this should do it:
function toggle_show(type)
{
const menu = document.getElementById("over");
if (document.getElementById("list_all").checked)
{
document.querySelector("div.outer2").appendChild(menu);
}
else
{
document.querySelector("div.outer").appendChild(menu);
}
}
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
function toggle_show(type)
{
const menu = document.getElementById("over");
if (document.getElementById("list_all").checked)
{
document.querySelector("div.outer2").appendChild(menu);
}
else
{
document.querySelector("div.outer").appendChild(menu);
}
}
<head>
* {
margin:0;
padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
display:block;
border:none;
}
.outer {
width:760px;
margin:auto;
border:1px solid #000;
padding:10px 10px 20px;
position:relative;/* stacking context*/
overflow:auto;
}
.outer2{
width:1000px;
margin:auto;
border:1px solid #000000;
position:relative;
}
.image-holder {
float:right;
margin:86px 10px 10px 0;
width:500px;
height:400px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
border:1px solid #000;
border-bottom:none;
width:100px;
}
.links li {
width:100px;
background:blue;
color:#fff;
border-bottom:1px solid #000;
}
.links li a {
display:block;
width:90px;
padding:5px;
background:blue;
color:#fff;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:500px;
height:400px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
background:teal;
color:#000;
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
h1 {
text-align:center;
margin:1em 0;
}
</style>
</head>
<div class="outer2">
<b>list moves here</b>
<div class="outer">
<p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
<ul id="all" class="links">
<li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
</ul>
<ul id="over" class="links">
<li>Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></li>
<li>Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></li>
</ul>
</div>
</div>
I'm fairly new to HTML,CSS and Javascript and I'm trying to build a site with, ironically, 'How To' guides and instructions and business processes.
The idea is that I have a container on the side that acts as a 'menu' with buttons in it to select the guide they want.
Once the button is clicked, the container on the right changes. These containers on the right will be the space where the training material is placed, but for now, i have given all the containers a different colour so I can tell when it has changed. I'd like the button functions to work before I start adding everything to the containers. I'm struggling to get the code to work though, so the containers actually change! I've created a J-Fiddle that hopefully will show what I have tried so far..
To be honest I did also 'borrow' some code regarding getting the other containers to .hide when a button is clicked, but it doesn't work for me. If anyone has a more efficient way to hide the other containers (e.g. Containers 1,2 and 3 are hidden when container button 4 is selected), then go for it! Any help is really appreciated.
<div class="centrepositioning">
<div class="howToLeftList">
<button id="showpanel1">Centre White Panel</button>
<button id="showpanel2">Centre Red Panel</button>
<button id="showpanel3">Centre Blue Panel</button>
<button id="showpanel4">Centre Yellow Panel</button>
</div>
<div id="centrePanel"></div>
<div id="centrePanel2"></div>
<div id="centrePanel3"></div>
<div id="centrePanel4"></div>
<script type="text/javascript">
</script>
<script>
$(function() {
$('#showpanel1').click(function() {
$('div[id^=div]').hide();
$('#centrePanel1').show();
});
$('#showpanel2').click(function() {
$('div[id^=div]').hide();
$('#centrePanel2').show();
});
$('#showpanel3').click(function() {
$('div[id^=div]').hide();
$('#centrePanel3').show();
});
$('#showpanel4').click(function() {
$('div[id^=div]').hide();
$('#centrePanel4').show();
});
})</script>
.centrepositioning
{
border:thin blue solid;
margin:auto;
padding:10px;
width:1337px;
}
.howToLeftList
{
width:250px;
height:300px;
background-color:#004FB6;
padding:10px;
color:white;
float:left;
margin:5px;
}
#centrePanel
{
width:1000px;
background-color:white;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
}
#centrePanel2
{
width:1000px;
background-color:red;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel3
{
width:1000px;
background-color:blue;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel4
{
width:1000px;
background-color:yellow;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
JSFiddle
Ok some notes first:
1) In the fiddle you should put your javascript on the bottom left window, the top left window is for html only, minor, just throwing it as hint.
2) Your fiddle does not have jquery loaded, you can manage external resources on the left menu, right now your $ is undefined in the fiddle
And on to your problem, this selector is wrong
$('div[id^=div]').hide();
this selector is the right one
$('div[id^=centrePanel]').hide();
Your original selector is targeting any div with an id of "div" something, where you name them differently.
Try it and let me know
Here is a working code. In case you need to reference it.
$(function() {
$('#showpanel1').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel1').show();
});
$('#showpanel2').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel2').show();
});
$('#showpanel3').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel3').show();
});
$('#showpanel4').click(function() {
$('div[id^=centrePanel]').hide();
$('#centrePanel4').show();
});
})
.centrepositioning
{
border:thin blue solid;
margin:auto;
padding:10px;
}
.howToLeftList
{
width:250px;
height:300px;
background-color:#004FB6;
padding:10px;
color:white;
float:left;
margin:5px;
}
#centrePanel1
{
width:1000px;
background-color:white;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
}
#centrePanel2
{
width:1000px;
background-color:red;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel3
{
width:1000px;
background-color:blue;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
#centrePanel4
{
width:1000px;
background-color:yellow;
height:2000px;
float:left;
border:thin red solid;
margin:5px;
padding:10px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="centrepositioning">
<div class="howToLeftList">
<button id="showpanel1">Centre White Panel</button>
<button id="showpanel2">Centre Red Panel</button>
<button id="showpanel3">Centre Blue Panel</button>
<button id="showpanel4">Centre Yellow Panel</button>
</div>
<div id="centrePanel1">white</div>
<div id="centrePanel2">red</div>
<div id="centrePanel3">blue</div>
<div id="centrePanel4">yellow</div>
I want image slider to work in such a way that on hover of tab or click it should change the coreesponsing image like you can always see on flipkarts home page. Now the script I have made is working like normal slider which changes the image in 5 seconds. Can anybody help me to achieve what I need.
HTML
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<div class="tabbed">
<ul class="tab-slide">
<li>POWEROCK 13600mAh Power Banks</li>
<li style="float:right">POWERPUNCH 10500mAh Power Banks</li>
</ul>
</div>
css
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:600px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.tabbed{
width:100%;
max-width:1600px;
margin:0 auto
}
ul.tab-slide{
margin:0;
padding:0
}
ul.tab-slide li{
list-style:none;
width:50%;
display:block;
float:left;
display:list-item;
text-align:center;
background:#00a3d3
}
ul.tab-slide li a{
position:relative;
color:#000;
text-decoration:none;
width:100%;
display:block;
color:#fff;
padding:15px 0 15px 0;
}
ul.tab-slide li:hover{background:#000;}
JS
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 5000);
});
});//]]>
</script>
You can do this easy with some extra jQuery and adding some id's to your html.
First you have to add an id to the image within the HTML code:
<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="linktoimage"><!--powerock-->
<img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="linktoimage">
after that you add data-id to the hyperlinks:
<li><a data-id="img1" href="#">POWEROCK 13600mAh Power Banks</a></li>
<li style="float:right"><a data-id="img2" href="#">POWERPUNCH 10500mAh Power Banks</a></li>
When you have done that you can add the following jQuery:
$('.tabbed a').on({
'mouseenter': function() {
$('.fadein img').hide();
$('#' + $(this).data('id')).fadeIn();
}
This should do the trick. JSFIDDLE over here: https://jsfiddle.net/enhtymgk/1/
I am trying to implement a javascript pop-up box, but I am not sure how to fix the position of the pop-up window. Please check the below fiddle. When I click on the button, the box somehow appears in the middle of the page. Is there a way to make it appears right under my button?
http://jsfiddle.net/kf9mS/
<html lang="en" dir="ltr">
<head>
<style type="text/css">
.popup{
position:relative;
top:0px;
left:0px;
margin:0px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
.cancel{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
.cancel:hover{
background:rgb(255,50,50);
}
</style>
</head>
<body>
<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
</body>
</html>
and
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
(forked from javascript onclick create(element) div viz popup box)
Thanks!
Remove margin: 0 auto property. Because It is enforcing the element to be in center.
Working Fiddle
In your CSS popup make position: absolute; and remove top and left property
so your popup would become
.popup{
position:absolute;
margin:0px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
Rest all is fine
I'm building a menu that allows the user to hover over the given topic, and a menu drops down to reveal an array of different options.
Everything works fine in Safari, Chrome, Firefox, Opera, IE9 - IE8 (non-compatability view), but IE7 is doing something weird.
In HTML, my menu is built like this:
<div id="menu_container">
<div id="menu_collapse">
<div id="menu">
<div id="home_button">
</div>
<ul>
<li>Television</li>
<li>Radio</li>
<li>Get Involved</li>
<li>Non-Profit Services</li>
<li>Education</li>
<li>Donate</li>
<li>Extra</li>
</ul>
</div>
<div id="search_menu">
<div id="socialcons">
<img src="css/img/twitter.jpg">
<img src="css/img/facebook.jpg">
</div>
<input type="text" name="search">
<button></button>
</div>
</div>
</div>
</div>
My CSS looks like this:
#menu_container
{
clear:both;
float:left;
width:1000px;
}
#menu
{
float:left;
width:700px;
height:50px;
background-color:#654a6f;
}
#home_button
{
height:50px;
width:40px;
float:left;
background-image:url('img/home.jpg');
background-repeat:no-repeat;
}
#menu ul
{
background-color:#485860;
}
#menu li img
{
margin:0;
padding:0;
}
#menu li
{
float:left;
color:#ffffff;
line-height:50px;
padding-left:15px;
padding-right:15px;
text-shadow:1px 1px 2px #3e204d;
}
#menu li.active
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}
#menu li:hover
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}
#menu_collapse
{
position:absolute;
float:left;
width:1000px;
height:50px;
background-image:url('img/menu_collapse_bg.jpg');
background-repeat:repeat-x;
background-color:#ffffff;
z-index:99999;
}
#search_menu
{
height:40px;
width:295px;
padding-right:5px;
padding-top:10px;
float:right;
line-height:50px;
background-image:url('img/search_menu.jpg');
background-repeat:no-repeat;
}
#search_menu input
{
float:left;
width:140px;
}
#search_menu button
{
height:32px;
width:32px;
border:0;
outline:0;
float:left;
background-image:url('img/search.jpg');
}
#socialcons
{
height:32px;
width:75px;
float:left;
margin-left:20px;
margin-right:10px;
line-height:0;
}
#socialcons img
{
margin-left:3px;
}
And here is my JQuery, Javascript:
$(document).ready(function() {
$('#menu li').mouseover(function() {
$('.active').removeClass('active');
$('#menu_collapse').animate({height:'210'}, 300);
$('#menu li').mouseout(function() {
$(this).addClass('active');
});
});
$('#menu_collapse').hover(function(){},function(){
$('#menu_collapse').animate({height:'50'}, 300);
$('.active').removeClass('active');
});
});
In IE7, and all "compatible" modes with IE, the div #menu_collapsable animates back up when I hover of it, thus defeating the purpose of having it.
Help!!
$(document).ready(function() {
$('#menu li').hover(
function(){
$('.active').removeClass('active');
$('#menu_collapse').animate({height:'210'}, 300);
},
function(){
$(this).addClass('active');
}
);
$('#menu_collapse').mouseleave(function(){
$(this).animate({height:'50'}, 300);
$('.active').removeClass('active');
});
});