I am trying to append a new "app" to my "AppList" when a button is clicked.
JS
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appName");
var appSize = $(this).data("appSize");
var appTemp = $(this).data("appTemp");
$("<div class=\"app" + appName + appSize + "\"></div>").html(appTemp).appendTo(".AppList");
};
HTML
<body>
<section id="AppBox">
<div class="AppList">
<!-- == Facebook == -->
<div id="facebook-template">
<div class="App facebook Size170x290">
<h1>Hello Test</h1>
</div>
</div>
</div>
</section>
<!-- == Settings == -->
<section id="dialog-settings" class="dialog" title="Settings">
<button data-appName="facebook" data-appSize="Size170x290" data-appTemp="facebookTemp" class="appCreate">
Facebook</button>
</section>
</body>
CSS
#facebook-template {
display: none;
}
.facebook {
background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;
}
.facebook { top:120px; left:0; }
#AppBox {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
}
.AppList {
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
}
.App {
position:absolute;
display:block;
margin:5px;
padding:0;
box-shadow:0 0 5px 1px black;
color:#FFFFFF;
cursor:move;
}
.Size170x290 {height:170px;width:290px;}
Basically the thing isn't showing up and i don't know whats causing it.
You lost the context of your click handler.
This was an obvious first mistake:
$(".appCreate" ).click(newApp);
Second mistake is data names. Change to:
var appName = $(this).data("appname");
Notice the case. Convert all names to lower case.
I also added handlebars.js because of the conversation in the comments.
New working code:
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appname");
var appSize = $(this).data("appsize");
var appTemp = $(this).data("apptemp");
var template = Handlebars.compile(facebookTemp);
var html = template({
app : appName,
facebook : appTemp,
size : appSize
});
$(".AppList").append(html);
};
Live DEMO && CODE.
Related
I am trying to wrap my head around prototype in javascript as well as getting used to the value of this. Currently I have this set to .cf--modal but when I use this to set a variable it does not seem to work. As this is my first of many functions I really don't want to hit the document and would rather target "this" within the Modal Toggle function.
How can I change the modal_toggle function so that document.getElementById and document.getElementsByClassname can be replaced with this.find or something along those lines.
$(function(){
$('.cf--modal').each(function(){
let cf = new ContactForm($(this));
});
});
var ContactForm = function(this$obj){
this.$obj = this$obj;
this.init();
}
ContactForm.prototype.init = function init(){
this.modal_toggle();
};
ContactForm.prototype.modal_toggle = function modal_toggle(){
let cfCTA = document.getElementsByClassName("modal-trigger")[0];
let cfModal = document.getElementsByClassName("cf--modal")[0];
let cfModalClose = document.getElementsByClassName("close-cf-modal")[0];
cfCTA.onclick = function () {
cfModal.style.display = "block";
}
cfModalClose.onclick = function(){
cfModal.style.display = "none";
}
}
.cf{
width:1000px;
margin:40px auto;
}
.inner-container{
padding:12px 24px;
border:1px solid grey;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
}
.cf-block{
flex:1
}
/* Modal Styling */
.cf--modal{
width:375px;
height:200px;
position:absolute;
right:36px;
bottom:0;
border:1px solid grey;
display:none;
}
.close-cf-modal{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Contact Us
<section class="cf">
<div class="cf-container">
<form>
<div class="inner-container">
<div class="cf-block">
<div class="cf-label">First Name</div>
</div>
<div class="cf-block">
<div class="cf-label">Last Name</div>
</div>
<div class="cf-block">
<div class="cf-label">Email</div>
</div>
<div class="cf-block">
<div class="cf-label">Message</div>
</div>
<div class="cf-block">
<div class="cf-label">Submit</div>
</div>
</div>
</form>
</div>
</section>
<section class="cf--modal">
<span class="close-cf-modal">close</span>
</section>
You should use this.$obj to refer to the modal element for the current ContactForm
ContactForm.prototype.modal_toggle = function modal_toggle() {
let cfModal = this.$obj;
let cfCTA = $(".modal-trigger");
let cfModalClose = cfModal.find(".close-cf-modal");
cfCTA.on("click", function() {
cfModal.show();
})
cfModalClose.on("click", function() {
cfModal.hide();
});
}
I want to create a card game using java script. Being a beginner at java script, I am finding great difficulty finding a suitable tutorial for what I am trying to do. When the 'start game' button is selected, I want the computer to produce a random card. I have tried many ways of doing this and have came to no avail. Here is my code.
<html>
<head>
<title> Christmas Assignment </title>
<link rel="stylesheet" type="text/css" href="xmasass_1.css">
<script type = "text/javascript">
function randomImg(){
var myimages= [];
myimages[1] = "cards/1.gif";
myimages[2] = "cards/2.gif";
myimages[3] = "cards/3.gif";
myimages[4] = "cards/4.gif";
myimages[5] = "cards/5.gif";
myimages[6] = "cards/6.gif";
myimages[7] = "cards/7.gif";
myimages[8] = "cards/8.gif";
myimages[9] = "cards/9.gif";
myimages[10] = "cards/10.gif";
myimages[11] = "cards/11.gif";
myimages[12] = "cards/12.gif";
myimages[13] = "cards/13.gif";
function oddTrivia(){
var randomImg = Math.floor(Math.random()*(oddtrivia.length));
document.getElementById('comp').InnerHTML=myimages[randomImg];
}
ar total = 0;
function randomImg(){
var x = Math.floor(Math.random()*13)+1;
document.getElementById('img1').src = 'die'+x+'.gif';
document.getElementById('img2').src = 'die'+y+'.gif';
document.getElementById('score').innerHTML = total;
}
var card1Image;
var card2Image;
var card3Image;
var card4Image;
var card5Image;
var card6Image;
function start(){
var button = document.getElementById("startButton");
button.addEventListener("click", pickCards, false);
card1Image = document.getElementById("1");
card2Image = document.getElementById("2");
card3Image = document.getElementById("3");
card4Image = document.getElementById("4");
card5Image = document.getElementById("5");
card6Image = document.getElementById("6");
}
function pickCards(){
setImage(card1Image);
setImage(card2Image);
setImage(card3Image);
setImage(card4Image);
setImage(card5Image);
setImage(card6Image);
}
function setImage(cardImg){
var cardValue = Math.floor(1 + Math.random() * 13);
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<div id = "settings">
<img src = "settings_img.png" width = "60" height = "60">
</div>
<div id = "bodydiv">
<h1> Card Game</h1>
<div id = "computer">
<img src = " cards/back.gif">
</div>
<div id = "comp" > Computer </div>
<div id ="arrow">
<img src ="arrow2.png" width = "100" height="100">
</div>
<div id = "player">
<img src = " cards/back.gif">
</div>
<div id = "play"> Player </div>
<div id = "kittens">
<button id = "startButton" onclick ="randomImg" > Start Game </button>
<div id = "buttons_1">
<button id ="higher"> Higher
</button>
<button id = "equal"> Equal
</button>
<button id = "lower"> Lower
</button>
</div>
<button id = "draw"> Draw your Card
</button>
<div id = "resetscore"> Reset Score
</div>
</div>
<div id = "score">
</div>
</div>
</body>
</html>
body {
background:#66ccff;
}
h1 {
text-align:center;
}
#settings {
float:right;
margin-top:10px;
}
#bodydiv {
width: 800px;
height:600px;
margin-left:200px;
margin-top:40px;
margin-bottom:60px;
background:#ffccff;
border-radius: 10px;
}
#computer {
border-radius: 10px;
position: absolute;
left:35%;
top:27%;
}
#player {
border-radius: 10px;
position: absolute;
left:55%;
top:27%;
}
#start_game {
width :120px;
height: 55px;
margin-left: 350px;
margin-top:50px;
background:white;
border:1px solid black;
}
#buttons_1 {
text-align: center;
margin-top:20px;
}
#higher {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#equal {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#lower {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#draw {
width:160px;
height:30px;
margin-left:325px;
margin-top: 30px;
border:1px solid black;
background:#FFFFCC;
}
#resetscore {
text-align: center;
margin-top: 40px;
}
#arrow {
margin-left:370px;
margin-top:-130px;
}
#comp {
margin-top:240px;
margin-left:265px;
}
#play{
margin-top:10px;
margin-left:540px;
}
You code is kind of hard to read.
You forgot to close the "{" of your main function.
You are declaring "randomImg" again in the body of the "randomImg" function(use a different name).
You wrote
ar total = 0;
I think you meant to write:
var total = 0;
oddtrivia in the function "OddTrivia" is not defined.
y in the inner randomImg function is not defined.
Having poked a little bit at the code, here is a few things:
Problem no 1: randomImg()
It's hard to know your intentions, but you should likely begin with removing the start of your first function randomImg(){.
Because 1) It does not have an end and 2) If it actually spans everything then this line window.addEventListener("load", start, false); will not load on startup (since it does not get executed until randomImg() gets executed, and by then the page has already loaded.)
Problem no 2: Cannot set property 'src' of null"
Now when the first problem is out of the way, you should see "Uncaught TypeError: Cannot set property 'src' of null" if you look in your console. Yes, USE YOUR CONSOLE. Click on the error to show what causes it. Here it is:
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
This means that cardImg is null. We backtrack the first call of setImage() and find that the variable card1Image is passed in. So that must mean that card1Image also is null. You can check it yourself by adding a console.log('card1Image', card1Image); in your code. Or you add a breakpoint at that point. (Use the sources-tab in chrome dev tools, click at the line-numbering to add a break point. Refresh the page and it will stop at the break point. Now you can mouse-over variables to see their values.)
Let's look at where 'card1Image' is set.
card1Image = document.getElementById("1");
So why is this returning null? Do we even have a id="1" element in the html? That could be the reason. (It is.)
There are more problems, but I'll stop there, but when you have fixed this part AND have no errors please ask again. Always check your errors and if you ask a question here you should provide errors. And when you can also be more specific with your questions.
What might someone else have done differently?
When it comes to playing cards, why not an array of objects?
var cards = [
{ src : 'cards/1.gif', value: 1 },
{ src : 'cards/2.gif', value: 2 },
{ src : 'cards/3.gif', value: 3 },
{ src : 'cards/4.gif', value: 4 }
]; // (You can of course use code to generate it.)
// Then a function to put cards in the player's hand.
var playerHand = _.sample(cards, 2);
console.log(playerHand);
Here I assume lodash, a lightweight library for when you don't want to re-invent the wheel.
I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<link rel="stylesheet" type="text/css" href="boxes.css">
<script language="JavaScript">
el=document.getElementById("box1");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.left=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box2");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.right=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box3");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.middle=width*Math.random();
el.style.top=height*Math.random();
</script>
</head>
<body>
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</body>
</html>
Here is the CSS that I have:
#box1{
background-color:orange;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box2{
background-color:blue;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box3{
background-color:green;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.
Then you need to include a unit (e.g., "px") in the left and top style properties.
Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)
Here's a working version:
var el=document.getElementById("box1");
var width=window.innerWidth-50;
var height=window.innerHeight-50;
el.style.left=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box2");
el.style.right=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box3");
el.style.middle=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
Demo: http://jsfiddle.net/m3Gg3/
Also the left and top properties in your CSS should use : not =.
It is difficult to understand what you want, maybe this?.
<script>
window.onload = function() {
var titles = ["First box", "Second box", "Third box"]
var width=window.innerWidth-50
var height=window.innerHeight-50-120
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left= (width / titles.length) * i
el.style.top=0
el.style.width = width / titles.length
el.style.height = "120px"
document.body.appendChild(el);
}
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left=0
el.style.top=(height / titles.length) * i + 120
el.style.width = "120px"
el.style.height = height / titles.length
document.body.appendChild(el);
}
}
</script>
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#box4, #box7 {
font-family: Arial;
}
#box5, #box8 {
font-family: Courier;
}
#box6, #box9 {
font-family: Tahoma;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
function colorChange(field,group) {
switch (group) {
case 1:
document.getElementById("box2").style.backgroundColor = field.innerText;
break;
case 4:
document.getElementById("box11").style.backgroundColor = field.innerText;
break;
}
}
function fontChange(field,group) {
switch (group) {
case 2:
document.getElementById("box5").style.fontFamily = field.innerText;
break;
case 3:
document.getElementById("box8").style.fontFamily = field.innerText;
break;
}
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1" onclick="colorChange(this,1)">
Orange
</div>
<div id="box2" onclick="colorChange(this,1)">
Blue
</div>
<div id="box3" onclick="colorChange(this,1)">
Green
</div>
</div>
<div id="box_group2">
<div id="box4" onclick="fontChange(this,2)">
Arial
</div>
<div id="box5" onclick="fontChange(this,2)">
Courier
</div>
<div id="box6" onclick="fontChange(this,2)">
Tahoma
</div>
</div>
<div id="box_group3">
<div id="box7" onclick="fontChange(this,3)">
Arial
</div>
<div id="box8" onclick="fontChange(this,3)">
Courier
</div>
<div id="box9" onclick="fontChange(this,3)">
Tahoma
</div>
</div>
<div id="box_group4">
<div id="box10" onclick="colorChange(this,4)">
Orange
</div>
<div id="box11" onclick="colorChange(this,4)">
Blue
</div>
<div id="box12" onclick="colorChange(this,4)">
Green
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
Try this using jQuery :
Here the boxes should be created dynamically and without naming the id's hardcoded it also should be done in a better way with your code. It's easier now as you are creating 4 boxes, what about 100 or more. So it's wise to always take the better way to maintain scalability of our work.
HTML :
<div id="mainDiv">
</div>
CSS :
// general css for all divs inside mainDiv
#mainDiv div{
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
float : left;
}
jQuery :
$(document).ready(function(){
// taking a color array
var colorArray = new Array("red", "green", "gray", "blue");
// loop through as many boxes you want to create
for(var i = 1; i <= colorArray.length; i++){
$("#mainDiv").append("<div id=Box" + i + "></div>");
//changing the background-color
$("#Box"+ i).css("background-color", colorArray[i-1]);
}
});
Demo
Here's Another thread explaining similar Case,
And It's Solution
I would like to know how to resize a textbox to prevent text nearby it from overflowing.
I have 3 elements in a row, a label, a text box, and a button. the label however, can have words of varying lengths. if the word is too long it will move the text input too far to the side and the button will overflow onto the next line. to preserve the style of the page, I would prefer that the button stays on the same line as the other 2 elements.
I am trying to get the text box to shrink only as much as necessary to allow room for the other elements.
can I do this with JQuery?
Edit: here's the JFiddle thing:
http://jsfiddle.net/425ve/2/
and here's the main code:
<html>
<head>
<style>
body{
background-color:#000000;
color:#cccccc;
}
#chatbox{
width:100%;
height:85%;
border-style:solid;
border-color:#000000;
overflow:auto;
}
#mainchat{
width:82%;
float:left;
margin:0;
}
#sidebar{
float:left;
height:97%;
width:17%;
border-style:dashed;
border-width:1px;
border-color:#AAAAAA;
border-right:0;
border-top:0;
border-bottom:0;
overflow:auto;
}
#topbar{
border-style:dashed;
border-width:1px;
border-color:#AAAAAA;
border-left: 0;
border-top: 0;
float:left;
width:82%;
}
a{
color:#cccccc;
text-decoration:none;
}
a:hover{
color:#CCCCEE;
background-color:111122;
}
#topbarname{
float:right;
}
#message{
width: 90%;
background-color:#000000;
border-color:#CCCCCC;
border-style:solid;
border-width: 1px;
color:CCCCCC;
}
#submitbutton{
background-color:#000000;
border-color:#CCCCCC;
border-style:solid;
border-width: 1px;
color:#CCCCCC;
}
</style>
<script>
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return unescape(dc.substring(begin + prefix.length, end));
}
function doSomething() {
var myCookie = getCookie("IceID");
if (myCookie == null) {
window.location="login.php"
}
else {
// do cookie exists stuff
}
}
doSomething();
</script>
</head>
<body>
<div id="topbar">
| Information | Logs | characters | Profile | Private logs | Messages | Logout |
</div>
<div id="mainchat">
<div id="chatbox">
<?php
include("getpost.php");
//improve this with AJAX!
?>
</div>
<div id="input">
<form id="inputchat">
<b id="name">
<?php
echo $_COOKIE['IceID'];
?>
</b>
<input type="text" name="message" id="message"></input>
<input type="submit" id="submitbutton" value="say"></input>
</form>
</div>
<div id="utools">
</div>
</div>
<div id="sidebar">
<div id="title">
A
</div>
<div id="list">
</div>
</div>
</body>
</html>
Edit:to clarify, the name doesn't actively change while the page is being used(only right before being displayed), but it will be different depending on who loads the page. their username fits into that label.
You don't need jQuery. jQuery could make it much simpler though. I prefer vanilla.
var left = document.getElementById('name')
var resizable = document.getElementById('message')
var right = document.getElementById('submitbutton')
realign()
window.addEventListener('resize', realign)
function realign() {
resizable.style.width = '0'
var extraWidth = getWidth(resizable) // Measure the border and padding on it's own.
resizable.style.width = getWidth(resizable.parentNode) - getWidth(left) - getWidth(right)
function getWidth(element) { // Superior to offsetWidth because it measures fractions of a pixel which is even more relevant when using the browser zoom feature.
var rect = element.getBoundingClientRect() // A accurate way to measure location on the screen.
return rect.right - rec.left // The accurate width.
}
}
The only adjustment you need would be to fix my typo(s) if I made any and then if you want to support older versions of IE, you need to use the alternative to addEventListener, Google it.
CSS
body{
background:#000;
width:320px;
height:480px;
}
.view
{
width:320px;
height:480px;
background:#0066CC;
overflow:hidden;
visibility:hidden;
position:absolute;
left:0;top:0;
z-index:8;
}
.o{background:#FF9900;}
.main{ visibility:visible;}
.swapper {
width:640px;
height:480px;
overflow:hidden;
position:absolute;
left:0;top:0;
visibility:hidden;
z-index:9;
}
.on{position:static; float:left; visibility:visible;}
.btn {height:50px; width:125px; font-size:16px; background:#000; color:#FFF;}
JavaScript
function $(id)
{
return document.getElementById(id);
}
function clean()
{
alert("1");
ele = $("swapper");
ele.removeEventListener("webkitTransitionEnd" , clean , true);
//ele.style.webkitTransition = "height 0s";
ele.style.webkitTransform = "translate3d(0px,0,0)";
ele.zIndex = "7";
ele.style.visibility = "hidden";
//currentView = nextView;
}
function show(current , next)
{
alert(current+ " " + next);
//nextView = next;
s = $("swapper");
s.innerHTML = "";
nel = $(next);
cel = $(current);
v1 = cel.cloneNode(true);v2 = nel.cloneNode(true);
v1.id = "v1"; v1.onclick = ""; v1.className += " on";
v2.id = "v2"; v2.onclick = ""; v2.className += " on";
s.appendChild(v1); s.appendChild(v2);
s.style.webkitTransition = "-webkit-transform 1s ease";
s.style.zIndex = "9";
s.style.visibility = "visible";
nel.style.visibility = "visible";
cel.style.visibility = "hidden";
//s.style.left = "0px";
s.addEventListener("webkitTransitionEnd" , clean, true);
s.style.webkitTransform = "translate3d(-320px,0,0)";
//setTimeout(clean , 1000);
}
HTML
<div id="swapper" class="swapper"></div>
<div id="container">
<div id="set1">
<div id="main" class="view main o"><h1>1</h1><span class="btn" onclick="show('main','2');">Next</span></div>
<div id="2" class="view"><h1>2</h1><span class="btn" onclick="show('2','3');">Next</span></div>
<div id="3" class="view o"><h1>3</h1><span class="btn" onclick="show('3','4');">Next</span></div>
<div id="4" class="view"><h1>4</h1><span class="btn" onclick="show('4','main');">Next</span></div>
</div>
</div>
</body>
i am trying to create sliding panels , but this javascript function when called is executed with previous values once and then with the new values.
This kind of menu is called a horizontal accordion. There are countless simple plugins for jQuery -- why reinvent the wheel? Many examples available:
Examples
haccordion, a simple horizontal accordion plugin for jQuery
jQuery Simple Horizontal Accordion
30 jQuery Accordion Menus, Tutorials And Best Examples