Create two object Highslide - javascript

I faced with problem. I create two objects in highslide at the same time, but one of them don't activated (I can't close or move him). Below I write example:
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
function paint(id){
var element = document.getElementById('highslide-html_' + id);
var frame = hs.htmlExpand(element, { contentId: 'highslide-html_' + id });
return frame;
}
paint("id1");
paint("id2");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://highslide.com/highslide/highslide.js.php?full=true"></script>
<link rel="stylesheet" type="text/css" href="http://highslide.com/highslide/highslide.css" />
<div class="highslide-html-content highslide-move" id="highslide-html_id1">
<div class="highslide-header">
<ul>
<li class="highslide-close">
Close
</li>
</ul>
</div>
<div class="highslide-body">
Panel 1
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
<div class="highslide-html-content highslide-move" id="highslide-html_id2">
<div class="highslide-header">
<ul>
<li class="highslide-close">
Close
</li>
</ul>
</div>
<div class="highslide-body">
Panel 2
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
It doesn't work only when I create two objects at once. If I place paint(...) into the onclick handler, I can create any number of objects, and they will all be interactive.
Maybe anybody can help me?


Ohh, I found a solution.
Necessary add hs.allowSimultaneousLoading = true;

Related

Displaying info from sidebar on the same page

I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>

Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.

Adding multiple variables and outputting to specific div on special event. (jQuery and Javascript)

I have created a layout for what I would call, "NHL Line Picker". What it does is allow a user to analyze total point production of a 3-man forward line, by calculating their combined total points for the season, and outputting it to a div on the right side of the screen.
I am unable to figure out a solution to add the three current selected players points together, and output that final total to the div in the right hand side.
For quick reference, I store a data-total-pst attribute within each players li tag within the html which I am using in my jQuery.
You can visit a working copy of it at NHL Line Picker
P.S. You'll notice towards the top of the javascript file that I am using append to display the total points onto the screen. I know this is wrong, but I was using it to test if it would at least output something there. I was under the impression I would have to convert each to an integer, but I'm lost after this part.
(Make sure you view the working example on a laptop screen or higher, I haven't done any media queries for it to work on smaller devices, and probably won't since this is just a sample project to practice my javascript.)
$(document).ready(function() {
$('#left-wingers').on('click', 'li', function() {
var leftWingTotal = $(this).data('total-pts');
$('#results').find('#total-display').append(leftWingTotal);
});
$('#centers').on('click', 'li', function() {
var centerTotal = $(this).data('total-pts');
$('#results').find('#total-display').append(centerTotal);
});
$('#right-wingers').on('click', 'li', function() {
var rightWingTotal = $(this).data('total-pts');
$('#results').find('#total-display').append(rightWingTotal);
});
// Add Center
$('#centers').on('click', 'li', function() {
$('#selected-players').find('#center-pic').html($(this).data('src'));
$('#selected-players').find('#center-name').html($(this).data('name'));
$('#selected-players').find('#center-goals').html($(this).data('goals'));
$('#selected-players').find('#center-assists').html($(this).data('assists'));
$('#selected-players').find('#center-skills').html($(this).data('skills'));
});
// Add Right Wingers
$('#right-wingers').on('click', 'li', function() {
$('#selected-players').find('#right-wing-pic').html($(this).data('src'));
$('#selected-players').find('#right-wing-name').html($(this).data('name'));
$('#selected-players').find('#right-wing-goals').html($(this).data('goals'));
$('#selected-players').find('#right-wing-assists').html($(this).data('assists'));
$('#selected-players').find('#right-wing-skills').html($(this).data('skills'));
});
// Add Left Wingers
$('#left-wingers').on('click', 'li', function() {
$('#selected-players').find('#left-wing-pic').html($(this).data('src'));
$('#selected-players').find('#left-wing-name').html($(this).data('name'));
$('#selected-players').find('#left-wing-goals').html($(this).data('goals'));
$('#selected-players').find('#left-wing-assists').html($(this).data('assists'));
$('#selected-players').find('#left-wing-skills').html($(this).data('skills'));
});
//Clear All Button
$('#results').on('click', '#clear-all', function() {
$('#selected-players').find('#left-wing-skills,#left-wing-assists,#left-wing-goals,#left-wing-name,#left-wing-pic').text("");
$('#selected-players').find('#right-wing-skills,#right-wing-assists,#right-wing-goals,#right-wing-name,#right-wing-pic').text("");
$('#selected-players').find('#center-skills,#center-assists,#center-goals,#center-name,#center-pic').text("");
$('#results').find('#total-display').empty();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bruins Line Picker</title>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,400italic,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- App Title -->
<div id="title" class="container">
<div class="row">
<div class="col-md-4 ">
<img src="img/bruins-logo.png">
</div>
<div class="col-md-4 text-center">
<h1>Forward Lines</h1>
</div>
<div class="col-md-4 text-right">
<img src="img/nhl-logo.png">
</div>
</div>
</div>
<!-- Column Setup -->
<div id="setup" class="container">
<div class="row">
<div id="#roster" class="col-md-2">
<h2>Positions</h2>
<ul id="centers">
<h3>Centers</h3>
<li id="bergeron" data-src="<img src='img/patrice.png'>" data-skills="<p id='skills'>Perfect player. Can play with anyone.</p>" data-name="<h4>Patrice Bergeron</h4>" data-goals="28" data-assists="33" data-total-pts="61">Bergeron, Patrice</li>
<li id="krejci" data-src="<img src='img/krejci.jpg'>" data-skills="<p id='skills'>Elite caliber player when he feels like it.</p>" data-name="<h4>David Krejci</h4>" data-goals="19" data-assists="45" data-total-pts="64">Krejci, David</li>
<li id="ferraro" data-src="<img src='img/ferraro.jpg'>" data-skills="<p id='skills'>Not to sure what he brings to the table.</p>" data-name="<h4>Landon Ferraro</h4>" data-goals="10" data-assists="10" data-total-pts="20">Ferraro, Landon</li>
<li id="spooner" data-src="<img src='img/spooner.jpg'>" data-skills="<p id='skills'>Elite speed. Playmaker abilities.</p>" data-name="<h4>Ryan Spooner</h4>" data-goals="15" data-assists="40" data-total-pts="55">Spooner, Ryan</li>
<li id="kelly" data-src="<img src='img/kelly.jpg'>" data-skills="<p id='skills'>A reliable two-way player.</p>" data-name="<h4>Chris Kelly</h4>" data-goals="10" data-assists="20" data-total-pts="30">Kelly, Chris</li>
</ul>
<ul id="right-wingers">
<h3>Right Wingers</h3>
<li id="beleskey" data-src="<img src='img/beleskey.jpg'>" data-skills="<p id='skills'>Plays physical. Can score out front.</p>" data-name="<h4>Matt Beleskey</h4>" data-goals="18" data-assists="20" data-total-pts="38">Matt Beleskey</li>
<li id="connolly" data-src="<img src='img/connolly.jpg'>" data-skills="<p id='skills'>Useless.</p>" data-name="<h4>Brett Connolly</h4>" data-goals="12" data-assists="18" data-total-pts="30">Brett Connolly</li>
<li id="eriksson" data-src="<img src='img/loui.jpg'>" data-skills="<p id='skills'>Veteran, goal scorer, and play-maker.</p>" data-name="<h4>Loui Eriksson</h4>" data-goals="25" data-assists="25" data-total-pts="50">Loui Eriksson</li>
<li id="hayes" data-src="<img src='img/hayes.jpg'>" data-skills="<p id='skills'>Why???</p>" data-name="<h4>Jimmy Hayes</h4>" data-goals="15" data-assists="15" data-total-pts="30">Jimmy Hayes</li>
</ul>
<ul id="left-wingers">
<h3>Left Wingers</h3>
<li id="pastrnak" data-src="<img src='img/pasta.jpg'>" data-skills="<p id='skills'>Pure goal scorer. High speed and skill.</p>" data-name="<h4>David Pastrnak</h4>" data-goals="20" data-assists="20" data-total-pts="40">David Pastrnak</li>
<li id="marchand" data-src="<img src='img/marchand.jpg'>" data-skills="<p id='skills'>Great wrist shot and overall speed.</p>" data-name="<h4>Brad Marchand</h4>" data-goals="35" data-assists="20" data-total-pts="55">Brad Marchand</li>
<li id="randall" data-src="<img src='img/randell.jpg'>" data-skills="<p id='skills'>No comment.</p>" data-name="<h4>Tyler Randell</h4>" data-goals="10" data-assists="15" data-total-pts="25">Tyler Randell</li>
<li id="stempniak" data-src="<img src='img/stemp.jpg'>" data-skills="<p id='skills'>Veteran, with play-maker abilities</p>" data-name="<h4>Lee Stempniak</h4>" data-goals="15" data-assists="15" data-total-pts="30">Lee Stempniak</li>
</ul>
</div>
<!-- End Roster -->
<div id="selected-players" class="col-md-8 text-center">
<!-- Nested Row -->
<div class="row">
<div class="col-md-4">
<h2>Left Wing</h2>
<div id="left-wing-pic" class="photo">
</div>
<div id="left-wing-name">
</div>
<div id="left-wing-goals">
</div>
<div id="left-wing-assists">
</div>
<div id="left-wing-skills">
</div>
</div>
<div class="col-md-4">
<h2>Centerman</h2>
<div id="center-pic" class="photo">
</div>
<div id="center-name">
</div>
<div id="center-goals">
</div>
<div id="center-assists">
</div>
<div id="center-skills">
</div>
</div>
<div class="col-md-4">
<h2>Right Wing</h2>
<div id="right-wing-pic" class="photo">
</div>
<div id="right-wing-name">
</div>
<div id="right-wing-goals">
</div>
<div id="right-wing-assists">
</div>
<div id="right-wing-skills">
</div>
</div>
</div>
<!-- Nested Row -->
</div>
<div id="results" class="col-md-2">
<h2>Results</h2>
<div id="total-display">
</div>
<button id="clear-all">Clear</button>
<button id="calculate">Calculate</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

You can simplify the function for each position into one this way:
Using an array to store the value for each position and then + all values.
var total=['0','0','0'];
$('#roster ul').on('click', 'li', function() {
var i = $(this).parent('ul').index('ul');
total[i] = $(this).data('total-pts');
var output = 0;
$.each(total,function(){output+=parseFloat(this) || 0;});
$('#total-display').html(output);
});
Example Snippet
$(document).ready(function() {
var total=['0','0','0'];
$('#roster ul').on('click', 'li', function() {
var i = $(this).parent('ul').index('ul');
total[i] = $(this).data('total-pts');
var output = 0;
$.each(total,function(){output+=parseFloat(this) || 0;});
$('#total-display').html(output);
});
// Add Center
$('#centers').on('click', 'li', function() {
$('#selected-players').find('#center-pic').html($(this).data('src'));
$('#selected-players').find('#center-name').html($(this).data('name'));
$('#selected-players').find('#center-goals').html($(this).data('goals'));
$('#selected-players').find('#center-assists').html($(this).data('assists'));
$('#selected-players').find('#center-skills').html($(this).data('skills'));
});
// Add Right Wingers
$('#right-wingers').on('click', 'li', function() {
$('#selected-players').find('#right-wing-pic').html($(this).data('src'));
$('#selected-players').find('#right-wing-name').html($(this).data('name'));
$('#selected-players').find('#right-wing-goals').html($(this).data('goals'));
$('#selected-players').find('#right-wing-assists').html($(this).data('assists'));
$('#selected-players').find('#right-wing-skills').html($(this).data('skills'));
});
// Add Left Wingers
$('#left-wingers').on('click', 'li', function() {
$('#selected-players').find('#left-wing-pic').html($(this).data('src'));
$('#selected-players').find('#left-wing-name').html($(this).data('name'));
$('#selected-players').find('#left-wing-goals').html($(this).data('goals'));
$('#selected-players').find('#left-wing-assists').html($(this).data('assists'));
$('#selected-players').find('#left-wing-skills').html($(this).data('skills'));
});
//Clear All Button
$('#results').on('click', '#clear-all', function() {
$('#selected-players').find('#left-wing-skills,#left-wing-assists,#left-wing-goals,#left-wing-name,#left-wing-pic').text("");
$('#selected-players').find('#right-wing-skills,#right-wing-assists,#right-wing-goals,#right-wing-name,#right-wing-pic').text("");
$('#selected-players').find('#center-skills,#center-assists,#center-goals,#center-name,#center-pic').text("");
$('#results').find('#total-display').empty();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="roster" class="col-md-2">
<h2>Positions</h2>
<h3>Centers</h3>
<ul id="centers">
<li id="spooner" data-src="<img src='img/spooner.jpg'>" data-skills="<p id='skills'>Elite speed. Playmaker abilities.</p>" data-name="<h4>Ryan Spooner</h4>" data-goals="15" data-assists="40" data-total-pts="55">Spooner, Ryan</li>
<li id="kelly" data-src="<img src='img/kelly.jpg'>" data-skills="<p id='skills'>A reliable two-way player.</p>" data-name="<h4>Chris Kelly</h4>" data-goals="10" data-assists="20" data-total-pts="30">Kelly, Chris</li>
</ul>
<h3>Right Wingers</h3>
<ul id="right-wingers">
<li id="beleskey" data-src="<img src='img/beleskey.jpg'>" data-skills="<p id='skills'>Plays physical. Can score out front.</p>" data-name="<h4>Matt Beleskey</h4>" data-goals="18" data-assists="20" data-total-pts="38">Matt Beleskey</li>
<li id="connolly" data-src="<img src='img/connolly.jpg'>" data-skills="<p id='skills'>Useless.</p>" data-name="<h4>Brett Connolly</h4>" data-goals="12" data-assists="18" data-total-pts="30">Brett Connolly</li>
</ul>
<h3>Left Wingers</h3>
<ul id="left-wingers">
<li id="pastrnak" data-src="<img src='img/pasta.jpg'>" data-skills="<p id='skills'>Pure goal scorer. High speed and skill.</p>" data-name="<h4>David Pastrnak</h4>" data-goals="20" data-assists="20" data-total-pts="40">David Pastrnak</li>
<li id="marchand" data-src="<img src='img/marchand.jpg'>" data-skills="<p id='skills'>Great wrist shot and overall speed.</p>" data-name="<h4>Brad Marchand</h4>" data-goals="35" data-assists="20" data-total-pts="55">Brad Marchand</li>
</ul>
</div>
<!-- End Roster -->
<div id="selected-players" class="col-md-8 text-center">
<!-- Nested Row -->
<div class="row">
<div class="col-md-4">
<h2>Left Wing</h2>
<div id="left-wing-pic" class="photo">
</div>
<div id="left-wing-name">
</div>
<div id="left-wing-goals">
</div>
<div id="left-wing-assists">
</div>
<div id="left-wing-skills">
</div>
</div>
<div class="col-md-4">
<h2>Centerman</h2>
<div id="center-pic" class="photo">
</div>
<div id="center-name">
</div>
<div id="center-goals">
</div>
<div id="center-assists">
</div>
<div id="center-skills">
</div>
</div>
<div class="col-md-4">
<h2>Right Wing</h2>
<div id="right-wing-pic" class="photo">
</div>
<div id="right-wing-name">
</div>
<div id="right-wing-goals">
</div>
<div id="right-wing-assists">
</div>
<div id="right-wing-skills">
</div>
</div>
</div>
<!-- Nested Row -->
</div>
<div id="results" class="col-md-2">
<h2>Results</h2>
<div id="total-display">
</div>
<button id="clear-all">Clear</button>
<button id="calculate">Calculate</button>
</div>
</div>
</div>

You can calculate the sum like below in your function -
$('#left-wingers').on('click', 'li', function() {
var leftWingTotal = $(this).data('total-pts');
var curTextStr = ($('#total-display').text() !== '')? $('#total-display').text(): 0;
var newTextStr = parseInt(currentStr, 10) + parseInt(leftWingTotal,10);
$('#total-display').text(newTextStr);
});
Is this what you are looking for?

I think you'll need to track the active player's points differently for it to add properly. The code can obviously be optimized in a million different ways, but in the essence of time, I just used data attributes attached to $('#selected-players'). Here I initialize them to 0 to prevent any NaN errors:
$('#selected-players').data('left-pts', 0)
$('#selected-players').data('center-pts', 0)
$('#selected-players').data('right-pts', 0)
I also added that this snip to your "Clear All" function.
Here I added a snippet to your "Right Wingers" click event which populates the data attribute, totals up all 3 data-attributes (using parseInt to cast values as integer), then injects the total into #total-display:
$('#selected-players').data('right-pts', $(this).data('total-pts'));
total = parseInt( $('#selected-players').data('left-pts') + parseInt( $('#selected-players').data('center-pts') ) + parseInt( $('#selected-players').data('right-pts') )
$('#results').find('#total-display').html(total);
I added similar snips to "Center Wingers" and "Left Wingers".
Now when you click a player, it updates the respective data-attribute w/ the player's total pts, adds up the left/center/right data-attributes, and updates the total with a (hopefully) accurate value.
You can see a working demo here: http://codepen.io/JeffreyPia/pen/oLbwxQ

Javascript foreach array key values, output to html

How do I loop thru array keys to output their values to HTML?
The layout I'm working with is a thumbnail grid, 3 columns by 2 rows. Each thumbnail has a caption below it. Selecting any of the thumbnails opens up a hidden container which is also a grid of 3 columns and 2 rows. Within that hidden container many of the images and captions are going to be identical so rather than have a whole bunch of duplicate HTML I figured I could just store each in an array and reference the values that each is associated with. I'm just stuck on how to create the loop at the moment.
var img=[
'image01.jpg','image02.jpg','image03.jpg','image04.jpg'
]
var details=[
'aaaaaa','bbbbbb','cccccc','dddddd'
];
$( "#yin" ).click(function() {
var img = [0,2];
var details = [0,1];
$(step).each(function() {
document.getElementById("img").innerHTML();
});
$(imgs).each(function() {
document.getElementById("img").innerHTML();
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>

There's an issue with that code before you get into looping, the img and details variables are being re-declared inside your click function. What are they intended to be? From the comments in your code they seem to be specifying which indices of the array to use.
var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg'];
var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];
$( "#yin" ).click(function() {
var imgIndices = [0,2];
var detailIndices = [0,1];
$("#img").html("");
$("#details").html("");
$(imgIndices).each(function(i, o) {
$("#img").append("<img src=\"" + images[o] + "\"/>");
});
$(detailIndices).each(function(i, o) {
$("#details").append("<p>" + details[o] + "</p>");
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>
I would take the click function out to a named function though and just pass in the arrays.

.slideToggle() is being triggered many times?

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?

If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle

code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)

Onmouseover on HTLML li tag

I'm new to asp.net (and to stack overflow :) ) and I want a hint element to be shown on onmouseover event of li tags. I don't know how to set the position of the hint element. My code is something like this:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
document.getElementById("agentVisit").style.display = "block";
document.getElementById("agentVisit").offsetLeft = e.offsetLeft; /*e.????*/
document.getElementById("agentVisit").offsetTop = e.offsetTop; /*e.????*/
};
</script>
<div class="node">
<div class="taxonomy"></div>
<div class="content">
<div id="contact-map">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)">
<a "blabla">
<span class="hideme">city name</span>
</a>
<p class="hideme"> city name <strong class="tel">123456789</strong></p>
</li>
/*other list items*/
</ul>
</div>
<div class="hr">
</div>

Unless you need a very good looking design to show your hint, you can use
<li title="city name">
update:
Check if it helps:
http://jsfiddle.net/ysuw5/91/

Categories