How to get onmouseover and onmouseout settings to work as desired?

How to get onmouseover and onmouseout settings to work as desired? - javascript

The Issue
I have a shopping cart for an online store and to view the contents of the shopping bag you hover over a div in the navigation menu. I made a prototype where the shoppingTab div actually touched the trolley div in the navigation bar that made it appear upon hovering. This then allowed me to move my cursor from the shoppingTab div in the navigation bar to the trolley div without the shopping cart disappearing until onmouseout which was strangely set only to the shoppingTab in the navigation bar, not the trolley div itself but I liked this odd little quirk. Therefore I would like to replicate this behaviour on to my new site.
Don't worry: I know what you've read up to this point hasn't been enough information to go off, don't worry there is more detailed stuff sitting below above my current code. You'll get what I mean when you scroll further down :).
PROTOTYPE CODE
Here is the prototype on JSFiddle (and it doesn't work onmouseover???) https://jsfiddle.net/Please_Reply/k1k566wp/1/ so just in case here is the raw code which will work if you copy and paste it into a blank HTML file etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.container{
width:960px;
margin:auto;
}
.header{
width:960px;
height:100px;
background-color:#06F;
float:left;
}
#trolley{
width:150px;
height:30px;
background-color:white;
float:right;
border-radius:10px;
color:black;
border:1px solid black;
line-height:30px;
font-family:"Calibri";
cursor: pointer;
}
.shop{
width:960px;
height:700px;
background-color:white;
float:left;
font-family:"Calibri Light";
padding:20px;
}
#shoppingTab{
display:none;
height:400px;
width:400px;
background-color:#CCC;
color:black;
position:relative;
margin-top:1px;
border-radius:10px;
color:black;
border:1px solid black;
padding-left:10px;
float:right;
}
html{
background-color:#00F;
}
.product{
height:200px;
width:150px;
float:left;
border: 1px solid black;
border-radius:10px;
margin-right:20px;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span id="name"></span><div id="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>¤</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
<div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
</div>
</div>
<div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />
<div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
</div>
</div>
</body>
</html>
<script>
var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []
for(var a = 1; a <= 3; a++){
stat[a] = false;
}
function update(){
document.getElementById("NOI").innerHTML = numberOfItems;
document.getElementById("NOI2").innerHTML = numberOfItems;
document.getElementById("totalPrice").innerHTML = total;
document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
function addToCart(productName, productID, price){
items[productID] = productName;
total += price;
numberOfItems++;
update();
}
function removeFromCart(productName, productID, price){
items.splice(productID, 1);
total -= price;
if(stat[productID]){
numberOfItems--;
}
update();
}
function change(i){
if(stat[i] == false){
stat[i] = true;
}else{
stat[i] = false;
}
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("customer");
if (user != "") {
customerName = getCookie("customer");
document.getElementById("name").innerHTML = customerName;
alert("Welcome again, " + user + ".");
} else {
document.getElementById("name").innerHTML = "please set up an account";
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
document.getElementById("name").innerHTML = user;
}
}
}
function changeCookie(){
var user = getCookie("customer");
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
}
document.getElementById("name").innerHTML = user;
}
checkCookie();
</script>
MY CURRENT CODE
I have a JSFiddle of my current code (Which doesn't work so I copied the code below as well. I think it is because I have pure Javascript in there which it is trying to read as JQuery??? I don't know... anyway if you can't fix the JSFiddle just copy the code that actually works below the JSFiddle link)... https://jsfiddle.net/Please_Reply/9uwj2bed/2/
So basically, in the code below, I need the shoppingCart div to appear when you hover over the shopcartbar div (probably using onmouseover). But in terms of onmouseout, I would like to be able to hover onto the shoppingCart div without it disappearing. I would like the onmouseout to work on both the shopcartbar div and the shoppingCart div just like it somehow does in my prototype???
One other issue when I use onmouseover on the shoppingCart div is that when I hover over any of the .smallProduct divs inside of the shoppingCart div, they seem to trigger onmouseout which is not what I want either, they are part of the shoppingCart div.
<head>
<style>
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:white; /* Sets the background colour */
font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
width:100%;
background-color:blue;
color:white; /* The sets the colour of the font */
}
div{
display: inline-block; /* Sets the display type */
float:left; /* Sets the float position */
}
#one, #two, #three, #four{
background-color:black;
height:90px;
color:white;
text-align:center;
font-size:25px;
}
#slider{
background-color:blue;
height:10px;
width:100px;
position: absolute; /* Sets the position to a specific type */
left: 0; /* Sets the number of pixels from the left that this object is placed */
bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
margin-left:30px; /* Specifies the margin from the left side */
margin-right:30px; /* Specifies the margin from the right side */
padding-top:7px; /* Specifies the padding from the top side */
pointer-events:none; /* Specifies the cursor events */
margin-top:25px; /* Specifies the margin from the top side */
}
#shoppingTab{
display:none;
height:670px;
width:400px;
background-color:white;
color:black;
position:relative;
margin-top:-2px;
border-radius:10px;
color:black;
border:1px solid #323232;
padding:10px;
float:right;
z-index:50;
}
.smallProduct{
height:50px;
width:390px;
float:left;
border: 2px solid black;
border-radius:10px;
font-size:16px;
cursor:pointer;
margin-bottom:10px;
overflow:hidden;
}
.smallProduct:hover{
border:2px solid blue;
}
</style>
</head>
<body>
<div class="container"> <!-- This is the container -->
<div class="header"> <!-- This is the header -->
<div style="float:left"> <!-- This is the logo -->
<img src="logo.png" height="120px"/>
</div>
<div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
<div onmouseover="tabDisplay('block')" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
<img src="images/shoppingCart.png" height="30px"/> Shopping Cart (<span id="numberOfItems">0</span>)
</div>
<div id="shoppingTab" onmouseout="tabDisplay('none')">
Shopping Cart<br />
<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
<div class="smallProduct" id="thmbproduct1"></div>
<div class="smallProduct" id="thmbproduct2"></div>
<div class="smallProduct" id="thmbproduct3"></div>
<div class="smallProduct" id="thmbproduct4"></div>
<div class="smallProduct" id="thmbproduct5"></div>
<div class="smallProduct" id="thmbproduct6"></div>
<div class="smallProduct" id="thmbproduct7"></div>
<div class="smallProduct" id="thmbproduct8"></div>
Total: $<span id="totalPrice">00</span>.00
</div>
<span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
</span>
</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<div id="one" class="item"><div class="inside">Button 1</div></div> <!-- This is just one of the buttons -->
<div id="two" class="item"><div class="inside">Button 2</div></div>
<div id="three" class="item"><div class="inside">Button 3</div></div>
<div id="four" class="item"><div class="inside">Button 4</div></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
</script>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#slider").animate({
"left": $('#three').position().left + "px",
"width": $('#three').width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $('#three').position().left + "px",
"width": $('#three').width() + "px"
}, 500);
});
});
</script>

Try replacing this section:
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
With this:
$( "#shopcartbar, #shoppingTab" ).mouseenter(function() {
$("#shoppingTab").show();
})
.mouseleave(function() {
$("#shoppingTab").hide();
});

Related

styling Javascript alert box with css [duplicate]

I need to change the style of the "OK" Button in an alert box.
<head>
<script type="text/javascript">
function show_alert() {
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>

The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Dialogue does a lot of the work for you, working basically as I have described: Link.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

I use SweetAlert, It's Awesome, You will get lots of customization option as well as all callbacks
swal("Here's a message!", "It's pretty, isn't it?");

I tried to use script for alert() boxes styles using java-script.Here i used those JS and CSS.
Refer this coding JS functionality.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = d.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
alertObj.style.visiblity="visible";
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
msg = alertObj.appendChild(d.createElement("p"));
//msg.appendChild(d.createTextNode(txt));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.focus();
btn.onclick = function() { removeCustomAlert();return false; }
alertObj.style.display = "block";
}
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
And CSS for alert() Box
#modalContainer {
background-color:rgba(0, 0, 0, 0.3);
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:1px solid #666;
background-color:#fff;
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#3073BB;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:7px;
border:0 none;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#357EBD;
border-radius: 3px;
text-decoration:none;
}
/* unrelated styles */
#mContainer {
position:relative;
width:600px;
margin:auto;
padding:5px;
border-top:2px solid #000;
border-bottom:2px solid #000;
font:0.7em verdana,arial;
}
h1,h2 {
margin:0;
padding:4px;
font:bold 1.5em verdana;
border-bottom:1px solid #000;
}
code {
font-size:1.2em;
color:#069;
}
#credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
}
#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
.important {
background-color:#F5FCC8;
padding:2px;
}
code span {
color:green;
}
And HTML file:
<input type="button" value = "Test the alert" onclick="alert('Alert this pages');" />
And also View this DEMO: JSFIDDLE and DEMO RESULT IMAGE

Not possible. If you want to customize the dialog's visual appearance, you need to use a JS-based solution like jQuery.UI dialog.

Option1. you can use AlertifyJS , this is good for alert
Option2. you start up or just join a project based on webapplications, the design of interface is maybe good. Otherwise this should be changed. In order to Web 2.0 applications you will work with dynamic contents, many effects and other stuff. All these things are fine, but no one thought about to style up the JavaScript alert and confirm boxes.
Here is the they way
create simple js file name jsConfirmStyle.js. Here is simple js code
ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;
xConfirmStart=800;
yConfirmStart=100;
if(ie5||nn6) {
if(ie5) cs=2,th=30;
else cs=0,th=20;
document.write(
"<div id='jsconfirm'>"+
"<table>"+
"<tr><td id='jsconfirmtitle'></td></tr>"+
"<tr><td id='jsconfirmcontent'></td></tr>"+
"<tr><td id='jsconfirmbuttons'>"+
"<input id='jsconfirmleft' type='button' value='' onclick='leftJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
" "+
"<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
"</td></tr>"+
"</table>"+
"</div>"
);
}
document.write("<div id='jsconfirmfade'></div>");
function leftJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=leftJsConfirmUri;
}
function rightJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=rightJsConfirmUri;
}
function confirmAlternative() {
if(confirm("Scipt requieres a better browser!")) document.location.href="http://www.mozilla.org";
}
leftJsConfirmUri = '';
rightJsConfirmUri = '';
/**
* Show the message/confirm box
*/
function showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,confirmrighturi) {
document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
document.getElementById("jsconfirmleft").value=confirmlefttext;
document.getElementById("jsconfirmright").value=confirmrighttext;
leftJsConfirmUri=confirmlefturi;
rightJsConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5) {
document.getElementById("jsconfirm").style.left='25%';
document.getElementById("jsconfirm").style.top='35%';
}
else if(nn6) {
document.getElementById("jsconfirm").style.top='25%';
document.getElementById("jsconfirm").style.left='35%';
}
else confirmAlternative();
}
Create simple html file
<html>
<head>
<title>jsConfirmSyle</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jsConfirmStyle.js"></script>
<script type="text/javascript">
function confirmation() {
var answer = confirm("Wanna visit google?")
if (answer){
window.location = "http://www.google.com/";
}
}
</script>
<style type="text/css">
body {
background-color: white;
font-family: sans-serif;
}
#jsconfirm {
border-color: #c0c0c0;
border-width: 2px 4px 4px 2px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: -1000px;
z-index: 100;
}
#jsconfirm table {
background-color: #fff;
border: 2px groove #c0c0c0;
height: 150px;
width: 300px;
}
#jsconfirmtitle {
background-color: #B0B0B0;
font-weight: bold;
height: 20px;
text-align: center;
}
#jsconfirmbuttons {
height: 50px;
text-align: center;
}
#jsconfirmbuttons input {
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
}
#jsconfirmleft{
background-image: url(left.png);
}
#jsconfirmright{
background-image: url(right.png);
}
</style>
<p>
JsConfirmStyled </p>
<p>standard</p>
</body>
</html>

You need to create your own alert box like this:
function jAlert(text, customokay){
document.getElementById('jAlert_content').innerHTML = text;
document.getElementById('jAlert_ok').innerHTML = customokay;
document.body.style.backgroundColor = "gray";
document.body.style.cursor="wait";
}
jAlert("Stop! Stop!", "<b>Okay!</b>");
#jAlert_table, #jAlert_th, #jAlert_td{
border: 2px solid blue;
background-color:lightblue;
border-collapse: collapse;
width=100px;
}
#jAlert_th, #jAlert_td{
padding:5px;
padding-right:10px;
padding-left:10px;
}
#jAlert{
/* Position fixed */
position:fixed;
/* Center it! */
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
<p>TEXT</p>
<div id="jAlRem">
<div id="jAlert">
<table id="jAlert_table">
<tr id="jAlert_tr">
<td id="jAlert_td"> <p id="jAlert_content"></p> </td>
<td id="jAlert_td"> <button id='jAlert_ok' onclick="jAlertagree()"></button> </td>
</tr>
</table>
</div>
</div>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<script>
function jAlertagree(){
var parent = document.getElementById('jAlRem');
var child = document.getElementById('jAlert');
parent.removeChild(child);
document.body.style.backgroundColor="white";
document.body.style.cursor="default";
}
</script>
The js portion gets the element in the HTML to create the alert box, then deletes it after the user clicks ok.
You can call the alert using jAlert("Custom Text", "Ok!");

One option is to use altertify, this gives a nice looking alert box.
Simply include the required libraries from here, and use the following piece of code to display the alert box.
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
The output will look like this. To see it in action here is the demo

I know this is an older post but I was looking for something similar this morning.
I feel that my solution was much simpler after looking over some of the other solutions.
One thing is that I use font awesome in the anchor tag.
I wanted to display an event on my calendar when the user clicked the event. So I coded a separate <div> tag like so:
<div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;">
<a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br />
Event: <span id="eventTitle" class="eventTitle"></span><br />
Start: <span id="startTime" class="startTime"></span><br />
End: <span id="endTime" class="endTime"></span><br /><br />
</div>
I find it easier to use class names in my jquery since I am using asp.net.
Below is the jquery for my fullcalendar app.
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'APIkey',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: {
googleCalendarId: '#group.calendar.google.com'
},
eventClick: function (calEvent, jsEvent, view) {
var stime = calEvent.start.format('MM/DD/YYYY, h:mm a');
var etime = calEvent.end.format('MM/DD/YYYY, h:mm a');
var eTitle = calEvent.title;
var xpos = jsEvent.pageX;
var ypos = jsEvent.pageY;
$(".eventTitle").html(eTitle);
$(".startTime").html(stime);
$(".endTime").html(etime);
$(".eventContent").css('display', 'block');
$(".eventContent").css('left', '25%');
$(".eventContent").css('top', '30%');
return false;
}
});
$(".eventContent").click(function() {
$(".eventContent").css('display', 'none');
});
});
</script>
You must have your own google calendar id and api keys.
I hope this helps when you need a simple popup display.

I use sweetalert2 library. It's really simple, a lot of customization, modern, animated windows, eye-catching, and also nice design.
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})
Check this link

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>

Styling alert()-boxes ist not possible. You could use a javascript modal overlay instead.

I don't think you could change the style of browsers' default alert boxes.
You need to create your own or use a simple and customizable library like xdialog. Following is a example to customize the alert box. More demos can be found here.
function show_alert() {
xdialog.alert("Hello! I am an alert box!");
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog#3/xdialog.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog#3/xdialog.min.js"></script>
<style>
.xd-content .xd-body .xd-body-inner {
max-height: unset;
}
.xd-content .xd-body p {
color: #f0f;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
}
.xd-content .xd-button.xd-ok {
background: #734caf;
}
</style>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>

I use AlertifyJS to style my dialogues.
alertify.alert('Ready!');
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function(){
var iframe;
return {
// dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
main:function(videoId){
//set the videoId setting and return current instance for chaining.
return this.set({
'videoId': videoId
});
},
// we only want to override two options (padding and overflow).
setup:function(){
return {
options:{
//disable both padding and overflow control.
padding : !1,
overflow: !1,
}
};
},
// This will be called once the DOM is ready and will never be invoked again.
// Here we create the iframe to embed the video.
build:function(){
// create the iframe element
iframe = document.createElement('iframe');
iframe.frameBorder = "no";
iframe.width = "100%";
iframe.height = "100%";
// add it to the dialog
this.elements.content.appendChild(iframe);
//give the dialog initial height (half the screen height).
this.elements.body.style.minHeight = screen.height * .5 + 'px';
},
// dialog custom settings
settings:{
videoId:undefined
},
// listen and respond to changes in dialog settings.
settingUpdated:function(key, oldValue, newValue){
switch(key){
case 'videoId':
iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
break;
}
},
// listen to internal dialog events.
hooks:{
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function(){
iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
},
// triggered when a dialog option gets update.
// warning! this will not be triggered for settings updates.
onupdate: function(option,oldValue, newValue){
switch(option){
case 'resizable':
if(newValue){
this.elements.content.removeAttribute('style');
iframe && iframe.removeAttribute('style');
}else{
this.elements.content.style.minHeight = 'inherit';
iframe && (iframe.style.minHeight = 'inherit');
}
break;
}
}
}
};
});
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set({frameless:true});
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/default.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/default.rtl.min.css"/>

Why nextImg and prevImg can't set elements's src attribution?

var imgs = ["https://i.stack.imgur.com/mucrb.png",
"https://i.stack.imgur.com/0BH67.png",
"https://i.stack.imgur.com/KdNeR.png",
"https://i.stack.imgur.com/StOAl.png",
"https://i.stack.imgur.com/yhvqi.png"];
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);
function showImg(e){
x = e.target.getAttribute("order");
document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
}
function nextImg(e){
x = e.target.getAttribute("order");
if(x == imgs.length-1){
x = 0;}
else{
x = x+1;}
document.getElementById("loopImg").setAttribute("src",imgs[x]);
}
function prevImg(e){
x = e.target.getAttribute("order");
if(x == 0){
x = imgs.length-1;}
else{
x = x-1;}
document.getElementById("loopImg").setAttribute("src",imgs[x]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="i1.png" alt="">
<p id="left"><</p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>
I want to write a loop images js script.
To click the button ,image can display according to the number in button.
Why nextImg and prevImg can't set elements's src attribution when to click them?
The nextImg can only work for one click, it can't run when to click for the second time.
The prevImg can't work at all.
It can get the order number when to click button key, how to get the order number when to click pLeft and pRight key?
The statement x = e.target.getAttribute("order"); in nextImg and prevImg can't get image's order number,how to fix it?

On the click of left and right, you are trying to get the arribute order of the clicked element. But actually it doesn't have any attribute like that..
What I have done is added a counter as to where is the current selected image. so whenever you click left or right, I decrement/increment the counter and set the image attribute with the waht the counter index says..
var imgs = ["https://i.stack.imgur.com/mucrb.png",
"https://i.stack.imgur.com/0BH67.png",
"https://i.stack.imgur.com/KdNeR.png",
"https://i.stack.imgur.com/StOAl.png",
"https://i.stack.imgur.com/yhvqi.png"];
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);
function showImg(e){
x = e.target.getAttribute("order");
document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
currentImage = x-1
}
var currentImage = 0;
function nextImg(){
currentImage = (currentImage + 1) % 5
document.getElementById("loopImg").setAttribute("src",imgs[currentImage]);
}
function prevImg(){
if (currentImage === 0) {
currentImage = 4
}
else {
currentImage --;
}
document.getElementById("loopImg").setAttribute("src",imgs[currentImage]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="i1.png" alt="">
<p id="left"><</p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>

prevImg and nextImg don't work because:
Those elements don't have an order attribute, so you get null from e.target.getAttribute("order"), and
In the case of nextImg, if it did have the attribute, its value would be a string, so x = x + 1 would be string concatenation, not addition.
Instead, maintain the current index in a variable, see *** comments:
var imgs = ["https://i.stack.imgur.com/mucrb.png",
"https://i.stack.imgur.com/0BH67.png",
"https://i.stack.imgur.com/KdNeR.png",
"https://i.stack.imgur.com/StOAl.png",
"https://i.stack.imgur.com/yhvqi.png"];
var bs = document.getElementsByTagName("button"); // *** Added var
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
var pLeft =document.getElementById("left"); // *** Added var
pLeft.addEventListener("click",prevImg);
var pRight =document.getElementById("right"); // *** Added var
pRight.addEventListener("click",nextImg);
var currentIndex = 0; // ***
// *** Reusable function so we aren't repeating ourselves constantly below
function displayImage(src) {
// *** Notice the .src property
document.getElementById("loopImg").src = src;
}
displayImage(imgs[0]); // *** Show the first image
function showImg(e){
// *** Note the unary + to convert to number
currentIndex = +e.target.getAttribute("order") - 1;
displayImage(imgs[currentIndex]);
}
function nextImg(e){
currentIndex = (currentIndex + 1) % imgs.length; // *** Wraps around
displayImage(imgs[currentIndex]);
}
function prevImg(e){
currentIndex = (currentIndex - 1 + imgs.length) % imgs.length; // *** Wraps around
displayImage(imgs[currentIndex]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="" alt="">
<p id="left"><<!-- *** Note using entity for '<' --></p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>
Side note: I didn't do a full audit of the code or anything like that. I did notice that in multiple places, the original code was falling prey to what I call The Horror of Implicit Globals. Be sure to declare your variables (bs, x, pLeft, pRight), in the narrowest scope you can.

Confused about linking an interactive element Javascript/HTML

I've been working on a website for my coursework, but I've gotten a bit stuck. I'm trying to hyperlink the images that I've put inside of what is basically a carousel (although done very weirdly, I'm told). My code is below.
JavaScript:
function ChangeImageLoop(button_id) {
var image = document.getElementById('Banner' + n);
if (button_id = "Right") {
n += 1;
} else {
n -= 1;
}
if (n > MaxN) {
n = 1
}
if (n < 1) {
n = 3
}
image.src = "Fancy Dress Banner " + n + ".png";
image.id = "Banner" + n;
}
And the HTML:
<div class="Content">
<div class="ImageSlide"> <a href="Costumes.html">
<img id="Banner1" src="Fancy Dress Banner 1.png" alt="Musical Fancy Dress">
</a>
</div>
<div class="ImageLeft">
<button type="button" id="Left" onclick='ChangeImageLoop2(id)' style="width:30px; height:18px;"></button>
</div>
<div class="LeftRightGap"></div>
<div class="ImageRight">
<button type="button" id="Right" onclick='ChangeImageLoop(id)' style="width:30px; height:18px;"></button>
</div>
Don't think it's relevant, but here's the CSS just in case:
.ImageSlide {
width:100%;
margin-top:2%;
margin-left:2%;
margin-right:2%;
background:#BCD6D6;
border:2px solid black;
}
.ImageLeft {
width:5%;
height:2%;
float:left;
margin-left:3%;
margin-top:1%;
background:#BCD6D6;
border:2px solid black;
}
.LeftRightGap {
width:80%;
height:2%;
float:left;
margin-left:2%;
margin-top:1%;
background:#BCD6D6;
border:2px solid black;
}
.ImageRight {
width:5%;
height:2%;
float:right;
margin-right:3%;
margin-top:1%;
background:#BCD6D6;
border:2px solid black;
}
I've tried a few different things, but I cant figure out how I would retrieve the contents of the 'href=""' section and change it, as each image needs to hyperlink to a different page of the site. If anyone could help, I would appreciate it.

Infinite gallery with multiple visible images

I'm looking to create something like the following has on top of their site.
http://www.vogue.com/
The auto-scrolling slideshow that has multiple images shown. (1, 2, 3) then (2, 3, 4). It cycles through them eventually depending on how many there are. Each image is also in a separate div, where I believe the overlay is being placed for the two outside images that aren't being focused.
I'm not that well versed in javascript to create something like this myself from scratch, and haven't found a jquery slideshow that allows for the multiple images to be seen at a given time. The closest I've found is a plugin that scrolls through 3 images at a time, and didn't auto-scroll.
Does anyone know how this would be easily accomplished with the given specs? I need it to perform pretty much how it does on the vogue site. Thanks in advance.

jsBin demo
jQuery:
// infinite Gallery - script by roXon, design idea by "Vogue(R)"
$(function(){
var c = 0; // COUNTER // SET HERE DESIRED START SLIDE NUMBER (zero based)
var speed = 300; // ANIMATION SPEED
var pause = 3500; // ANIMATION PAUSE
var $slider = $('.carousel-slider');
var $sli = $slider.find('.carousel-content');
var $btns = $('#btn-left, #btn-right');
/* DO NOT EDIT BELOW */
var sliN = $sli.length;
$('.carousel').clone().appendTo( $('.carousel:gt(0)') ); /*CLONE SLIDERS*/
var m = 0;
var w = $slider.closest('div').width();
var intv;
$slider = $('.carousel-slider'); // all
$slider.width(w*2);
// rearrange
$slider.eq(0).find('.carousel-content:lt('+(c)+')').appendTo( $slider.eq(0) );
$slider.eq(1).find('.carousel-content:lt('+(c-1)+')').appendTo( $slider.eq(1) );
$slider.eq(2).find('.carousel-content:gt('+(c)+')').prependTo( $slider.eq(2) );
// POPULATE WITH NAVIGATION BUTTONS
for(i=0;i<sliN;i++){
$('#nav-btns p').append(' '+ (i+1) +' ');
}
// TOGGLE ACTIVE CLASS TO NAV BUTTON
function navBtnsActive(){
c = c===-1 ? sliN-1 : c%sliN ; // counter resets
$('#nav-btns a').removeClass('btn-active').eq(c).addClass('btn-active'); // nav buttons actives
}
navBtnsActive();
var $lastCont;
function anim(){
if(c>m){ // right btn
$slider.animate({left:-w}, speed, 'linear', function(){
$(this).css({left:0}).find('.carousel-content:first').appendTo( $(this) );
});
m++;
}else if(c<m){ // left btn
$slider.animate({left:-w},0,function(){
$lastCont = $(this).find('.carousel-content:last');
$(this).find('.carousel-content:last').prependTo( $(this) );
}).animate({left:0}, speed, 'linear');
m--;
}
if(c!=m){anim();} // loop until match
}
// LEFT-RIGHT BUTTONS //
$btns.on('click',function(){
if(!$slider.is(':animated')){
var btnID = this.id=='btn-right' ? c++ : c-- ;
anim();
navBtnsActive();
m=c;
}
});
// NAV BUTTONS //
$('#nav-btns a').on('click',function(e){
e.preventDefault();
c = $(this).index();
anim();
navBtnsActive();
});
// AUTO SLIDE
function auto(){
clearInterval(intv);
intv = setInterval(function(){
$('#btn-right').click();
}, pause);
}
auto(); // start!
// PAUSE ON HOVER //
$('#gallery').on('mouseenter mouseleave',function( e ){
var mEnt = e.type=='mouseenter',
aSli = mEnt?clearInterval(intv):auto();
$btns.stop().fadeTo(300,mEnt?1:0);
});
});
HTML:
<div id="document_wrapper">
<div id="container">
<h1 class="title">BLOGUE</h1>
<div id="top-nav"></div>
<div id="gallery"> <!-- OUR PRECIOUS :) -->
<div class="carousel carousel-center">
<div class="carousel-slider">
<div class="carousel-content">
<!-- organize your content here -->
</div>
<!-- use more .carousel-content here -->
</div>
</div>
<div class="carousel carousel-left"></div>
<div class="carousel carousel-right"></div>
<div id="btn-left"></div>
<div id="btn-right"></div>
<div id="nav-btns"><p></p></div>
</div>
<!-- document content here -->
</div>
</div>
CSS:
*{margin:0;padding:0;} /* UGLY RESET */
body{
font:14px/24px "Myriad Pro","Trebuchet MS",sans-serif;
background:#F2EFED;
color:#555;
}
#document_wrapper{
position:relative;
overflow:hidden;
}
h1.title{
font-family:"Times New Roman",Times,serif;
font-size:14.16em;
line-height:0.6em;
font-weight:normal;
letter-spacing:10px;
color:#000;
position:relative;
z-index:1;
top:70px;
}
#container{
position:relative;
margin:0px auto;
width:980px;
padding-bottom:70px;
height:1000px;
background:#fff;
}
#top-nav{
border-top:1px solid #000;
position:relative;
z-index:2;
background:#fff;
height:36px;
width:100%;
}
/* GALLERY */
#gallery{
height:400px;
width:100%;
position:relative;
left:0px;
padding-bottom:36px; /* FOR NAV BUTTONS HEIGHT */
}
.carousel{
background:#147;
position:absolute;
margin-left:-10px;
width:850px;
height:400px;
border-left:10px solid #fff;
border-right:10px solid #fff;
overflow:hidden;
}
.carousel-left, .carousel-right{
opacity:0.2;
}
.carousel-left{
left:-860px;
}
.carousel-right{
left:860px;
}
.carousel-slider{
height:400px;
position:absolute;
left:0;
}
.carousel-content{
position:relative;
margin-left:-10px;
float:left;
width:850px;
height:400px;
border-left:10px solid #fff;
border-right:10px solid #fff;
}
/* BUTTONS */
#btn-left, #btn-right{
position:absolute;
background:#fff;
width:25px;
height:150px;
top:125px;
display:none;
cursor:pointer;
}
#btn-right{
right:130px;
}
/**/
#nav-btns{
position:relative;
top:400px;
height:30px;
width:850px;
}
#nav-btns{
text-align:right;
}
#nav-btns a{
font-style:italic;
text-decoration:none;
color:#888;
padding:0 8px;
margin:0 !important;
}
#nav-btns a.btn-active{
border-top:10px solid #fff;
text-decoration:none;
color:#000;
}
#nav-btns a:hover{
color:#000;
}

fiddle attached,
Minor code refactoring and optimisations can be done but the general idea is the same.
(function($) {
var $slider = $('#slider'),
finalOffset = '-' + $slider.children().last().offset().left + 'px';
slideSpeed = 5000,
timer = -1;
function startSlide() {
$slider.children().first().animate({
'margin-left' : finalOffset
}, slideSpeed, function() {
$slider.children().first().animate({'margin-left' : '0px'}, slideSpeed, function() {
startSlide();
});
});
}
startSlide();
}(jQuery));
cheers

Show / Hide / Toggle - Javascript / jQuery

I'm very new with Javascript.
I'm trying to do something with Show/Hide functions.
html:
<html>
<head>
<title> New Document </title>
<style>
#button01 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button01:hover {
background-color:#ffcccc;
}
#button01 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button01.png")
}
#button01 a:hover {
width:40px;
height:40px;
background:url("button01-hover.png")
}
#hidden01 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #ffcccc;
}
#button02 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button02:hover {
background-color:#cccccc;
}
#button02 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button02.png")
}
#button02 a:hover {
width:40px;
height:40px;
background:url("button02-hover.png")
}
#hidden02 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #cccccc;
}
</style>
</head>
<body>
<div style="width:300px;">
<div id="button01"></div>
<div id="button02"></div>
</div>
<div id="hidden01"> </div>
<div id="hidden02"> </div>
</body>
</html>
script:
function toggle(offset){
var i, x;
var stuff = Array('hidden01', 'hidden02'); //put all the id's of the divs here in order
for (i = 0; i < stuff.length; i++){ //hide all the divs
x = document.getElementById(stuff[i]);
x.style.display = "none";
}
// now make the target div visible
x = document.getElementById(stuff[offset]);
x.style.display = "block";
window.onload = function(){toggle(0);}
}
That's working, but I want to fix 2 things:
1- Close/Hide hidden divs if I click on it's corresponding button;
2- After clicking a button, fix hover button image. If click again unfix;
I've tried almost all the scripts posted and can not find a solution. I don't want to open the divs at same time.
If opens one, close the others.

You're using jQuery, so use jQuery.
$(function() {
function toggle(offset) {
$('div[id^=hidden]').hide().eq(offset).show();
}
toggle(0);
});
I don't know what you mean by the two things you want to fix, however. Please clarify.
Edit
Okay, I see what you're going for now. I've cleaned up your code a lot.
HTML
<div style="width:300px;">
<div id="button1"><a></a></div>
<div id="button2"><a></a></div>
</div>
<div id="hidden1"> </div>
<div id="hidden2"> </div>
CSS
#button1, #button2 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button1:hover {
background-color:#fcc;
}
#button2:hover {
background-color:#ccc;
}
#button1 a, #button2 a {
display:block;
width:40px;
height:40px;
margin:auto;
}
#button1 a {
background:url(http://lorempixum.com/40/40?1)
}
#button2 a {
background:url(http://lorempixum.com/40/40?3)
}
#button1 a:hover, #button1.hover a {
background:url(http://lorempixum.com/40/40?2)
}
#button2 a:hover, #button2.hover a {
background:url(http://lorempixum.com/40/40?4)
}
#hidden1, #hidden2 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #fcc;
}
JavaScript
var $buttons = $('div[id^=button]'),
$hiddenDivs = $('div[id^=hidden]'),
HOVER_CLASS = 'hover';
$buttons.live('click', function() {
var $this = $(this),
i = $this.index();
$buttons.removeClass(HOVER_CLASS);
$this.addClass(HOVER_CLASS);
$hiddenDivs.hide().eq(i).show();
}).first().click();
Demo
Last edit
Changed JavaScript and CSS. http://jsfiddle.net/mattball/bNCNQ/
CSS
#button1:hover a, #button1.hover a {
background:url(...)
}
#button2:hover a, #button2.hover a {
background:url(...)
}
JS
$buttons.live('click', function () {
var $this = $(this),
i = $this.index(),
show = !$this.hasClass(HOVER_CLASS);
$buttons.removeClass(HOVER_CLASS);
$this.toggleClass(HOVER_CLASS, show);
$hiddenDivs.hide().eq(i).toggle(show);
});

Here's a working demo: http://jsfiddle.net/R6vQ4/33/.
All of your JavaScript code can be condensed into this little block (and this isn't even as small as it can get):
$(document).ready(function()
{
$('div[id^=button]').click(function()
{
var element = $('#hidden' + $(this).attr('id').substr(6));
$('div[id^=button]').css('cssText', 'background-color: none');
if (element.is(':visible'))
{
$(this).css('cssText', 'background-color: none');
$('div[id^=hidden]').hide();
} else {
$('div[id^=hidden]').hide();
element.show();
$(this).css('cssText', 'background-color: ' + $(this).css('background-color') + ' !important');
}
});
});
The state of the button "sticks" when you press it, but my technique is a bit hacky, so feel free to change it.
When you use jQuery, you actually use it ;)

We Keep Coding

JavaScript is the programming language of the Web.

How to get onmouseover and onmouseout settings to work as desired? - javascript

Try replacing this section: function tabDisplay(displayStatus){ shoppingTab.style.display = displayStatus; } With this: $( "#shopcartbar, #shoppingTab" ).mouseenter(function() { $("#shoppingTab").show(); }) .mouseleave(function() { $("#shoppingTab").hide(); });

Related

styling Javascript alert box with css [duplicate]

Why nextImg and prevImg can't set elements's src attribution?

Confused about linking an interactive element Javascript/HTML

Infinite gallery with multiple visible images

Show / Hide / Toggle - Javascript / jQuery

Categories

Resources