I have a div containing jQuery image slideshow, i want to put another div/layer on top of the slideshow. Is it possible? Is it as simple as setting both div z-index css property?
<!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>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#SlideShow { display: none; width: 868px; height: 296px; }
-->
</style>
<script type="text/javascript" src="includes/jquery-1.4.1.js"></script>
<script type="text/javascript" src="includes/jquery.cj-simple-slideshow.js"></script>
<script type="text/javascript">
<!--
$(function() {
$(document).ready(function() {
//initialize the first slideshow container
$("#SlideShow").cjSimpleSlideShow();
});
});
//-->
</script>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td width="50%"> </td>
<td><div class="header_top"><div class="header_logo"><img src="images/logo.png" alt="Logo" width="120" height="148" border="0" /></div>
<div class="header_text"><img src="images/header_text.png" alt="" width="573" height="84" border="0" /></div>
</div>
<div class="header_image" style="z-index:0;"><div id="SlideShow" style="display:none;">
<img src="images/header_image.jpg" width="868" height="296" alt="This is caption 1." /><br />
<img src="images/header_image1.jpg" width="868" height="296" alt="This is caption 2." /><br />
<img src="images/header_image2.jpg" width="868" height="296" alt="This is caption 3." /><br />
</div>
</div><div class="content">
<div class="content_inner"><div><img src="images/heading_2.png" alt="Content" /></div>
<p>Content.</p>
<p>Content.</p>
<p>Content.</p></div>
<div class="content_right">
<div><img src="images/heading_1.png" alt="Content" /></div>
<p><br />
Content.</p>
<p>Content.</p>
<p>Content. </p>
<p>Content.</p>
<p>Content<br />
<br />
</p>
</div><br />
<div class="content_service"><div><img src="images/heading_3.png" alt="Content" /></div>
</div>
</div>
</td>
<td width="50%"> </td>
</tr>
</table>
</body>
</html>
I want half of 'content_right' div lay on top of slideshow div
You might be able to use the z-index property, or you could perhaps use position: absolute; on the div you want to appear above the slide-show.
#top_most_element
{
z-index: 99; /* or whatever, just so long as it's higher than those elements 'below' it */
}
Or, to use the position: absolute; alternative:
#container_element
{
position: relative; /* in order to position the child-element relative to this element, not the window or other parent element */
}
#top_most_element
{
position: absolute;
}
<div id="container_element">
<div class="slide">...</div>
<div class="slide">...</div>
<div id="top_most_element">
<!-- content to show -->
</div>
</div>
This may, or may not, work though, it depends on what javascript solution you're using to create the slideshow and how it works. If you could post that (the js/jQuery/etc, and the relevant (x)html and css) then we might be able to help you more effectively.
I have actually put a div on top of a self-baked jquery slide-show and it works normally in all browsers except for IE6 - IE8.
IE has some kind of weird bug where you have to give a background color to the div on top in order for it to have dimensions. And make it transparent afterward to get rid of the background color...
Also see my question about that problem.
Related
I am very new to asp.net and javascript (first ever project) so it may be something very simple. I have a vertical slider courtesy of http://do-web.com/jcontent/demo. Within each div are clickable divs which when clicked should update the value of a text box.
This work perfectly if the text boxes are outside of the vertical slider.
However i want the textboxes to be on the final slide. When i place them here only the last text box is updated regardless of how many slides there are (the example below only has two but have tried with 6 and it's only ever the last text box which updates.
I also wanted to add Required Field Validation to the text boxes but this doesn't work either when they are within the slider.
I assume there is some scope issues i'm unaware of. Hopefully someone can point me in the right direction.
Here's the code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet"/>
<link href="css/jcontent.css" rel="stylesheet" type="text/css"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.1.3.js"></script>
<script type="text/javascript" src="js/jquery.jcontent.0.8.min.js"></script>
<script type="text/javascript">
$("document").ready(function () {
$("div#demo").jContent({
orientation: 'vertical',
width: 960,
height: 360,
easing: "easeOutCirc"
});
});
</script>
<script>
function option(i, x) {
$(i).val(x);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="main">
<div id="demo">
<a title="" href="#" class="prev" style="font:12px arial black; width:50px; left:0px; margin-right:425px;">PREV</a>
<a title="" href="#" class="next" style="font:12px arial black; width:50px; right:0px; margin-left:425px;">NEXT</a>
<div class="slides" style="border-top:solid 1px #0078AD">
<div style="position:relative;">
<div class="title">Jack Size</div>
<div id="slide1option1" onclick="option('.option1t','C00');" style="position:absolute; top:20px; left:0; height:340px; width:480px; cursor:pointer;">
<img id="C00" src="images/slides/slide1_1.jpg" onmouseover="this.src='images/slides/slide1_1_focus.jpg'" onmouseout="this.src='images/slides/slide1_1.jpg'" border="0"/>
</div>
<div id="slide1option2" onclick="option('.option1t','C01')" style="position:absolute; top:20px; left:240px; height:340px; width:480px; cursor:pointer;">
<img id="C01" src="images/slides/slide1_2.jpg" onmouseover="this.src='images/slides/slide1_2_focus.jpg'" onmouseout="this.src='images/slides/slide1_2.jpg'" border="0"/>
</div>
</div>
<div style="position:relative;">
<div class="title">Jack Type</div>
<div id="slide2option1" onclick="option('.option2t','TS')" style="position:absolute; top:20px; left:0; height:340px; width:480px; cursor:pointer;">
<img id="TS" src="images/slides/slide2_1.jpg" onmouseover="this.src='images/slides/slide2_1_focus.jpg'" onmouseout="this.src='images/slides/slide2_1.jpg'" border="0"/>
</div>
<div id="slide2option2" onclick="option('.option2t','KS')" style="position:absolute; top:20px; left:320px; height:340px; width:480px; cursor:pointer;">
<img id="KS" src="images/slides/slide2_2.jpg" onmouseover="this.src='images/slides/slide2_2_focus.jpg'" onmouseout="this.src='images/slides/slide2_2.jpg'" border="0"/>
</div>
</div>
<div style="position:relative;">
<asp:TextBox id="TextBox1" class="option1t" runat="server" Width="30px"></asp:TextBox>
<asp:TextBox id="TextBox2" class="option2t" runat="server" Width="30px"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
That's because when you click next / prev in your slider, the slides are removed from the DOM and appended or prepended to the slider in a different position.
So you are clicking a button on the first page. Your textboxes are updated just fine, but when you switch slides, they are recreated and considered two brand new completely empty textboxes.
You need to store your options in another place and populate your textboxes when you actually get to that slide. There are multiple ways you can do this, by storing it in data attributes, hidden input fields or just in a global javascript array.
I have used the last one in the example below:
HTML
Change your onclick to:
onclick="option('option1t','C01')"
Notice I removed the . before option1t.
JS
Here I fill the textboxes with the options stored in the selected array each time you click Next.
var selected = [];
function option(i, x) {
selected[i] = x;
}
$("document").ready(function () {
$("div#demo").jContent({
orientation: 'vertical',
width: 360,
height: 360,
easing: "easeOutCirc"
});
$('.next').click(function () {
if (typeof selected['option1t'] != 'undefined') {
$('.option1t').val(selected['option1t']);
}
if (typeof selected['option2t'] != 'undefined') {
$('.option2t').val(selected['option2t']);
}
});
});
And you'll find a demo here
I am new to html, I am simply trying to add a caption on top or below each image in the code below; inputs welcome. It seems that an additional option is needed on the line where pictures are included; i have tried alt="my image description", it adds and info link "i" on the page, but I would need to place it above or below the image.
<head>
<title> identity </title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href = "../includes/important.css" rel= "stylesheet" type ="text/css" />
<link href="../includes/slide-out-menu-new.css" rel="Stylesheet" type="text/css"/>
<script src="../includes/js/slide-out-menu-new.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="../assignments/galleria/themes/classic/galleria.classic.css"></script>
<style>
#galleria{ width: 700px; height: 400px; background: #000 }
</style>
</head>
<body>
<div class= "name">
<center> <img src= "../images/main_menu_me.jpg"><center>
</div>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:white; text-decoration:none}
A:hover {color:yellow; text-decoration:none}
</STYLE>
<div class="body3">
<div id="galleria">
<img src="../images/lafete1.jpg" image title="My image title" alt="My image description">
<img src="../images/lafete2.jpg">
<img src="../images/lafete3.jpg">
</div>
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
<div class= "navigation2">
</br>
<p align="right"> about</p>
<p align="right"> contact</p>
</body>
</head>
From galleria's doc's:
Captions & meta data
If you want to extract meta data from the HTML source such as title & description, you can provide this as attributes:
<img src="image.jpg"
data-title="My title"
data-description="My <strong>description</strong>"
data-link="http://my.destination.com"
>
Side-note: In HTML5 one can now (by specification) add custom attributes to elements (in the HTML markup) but they must be prefixed with data-. That is what later versions of galleria now use.
Hope this helps!
I'm looking to see if there's a way to make this code less clumsy? I'm thinking there must be a more elegant way to make 2 buttons that toggle between 2 or more button states on hover and click.
Thanks!
<!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>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript">
img1 = "images/buy1.png";
img2 = "images/buy2.png";
function chng(c_img) {
if (c_img.src.indexOf(img1)!= -1) c_img.src = img2;
else c_img.src = img1;
}
img3 = "images/sell1.png";
img4 = "images/sell2.png";
function chng2(c_img) {
if (c_img.src.indexOf(img3)!= -1) c_img.src = img4;
else c_img.src = img3;
}
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115"
border="0" height="50" id="img" /></a>
</div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2"
width="115" border="0" height="50" id="img2" /></a>
</div>
</body>
</html>
This sounds like a perfect fit for using CSS background sprites. Create images that have both states in them, stacked vertically:
----------------------
| "on" image |
----------------------
----------------------
| "off" image |
----------------------
Give your links a class and apply the images to them to the elements using the background-image property (using the shorthand notation below):
.buy1 {
display: block;
width: 115px;
height: 50px;
background: transparent url(images/buy1.png) left bottom no-repeat;
}
.buy1.on { background-position: left top; }
Then with the JavaScript, you can simply toggle the class:
$(document).ready(function(){
$("#sell a").on('click',function(){
$(this).toggleClass('on');
});
});
This approach has a number of advantages:
Fewer server requests (you can combine all the images into one sprite
sheet and they will load in one request) mean better performance
There will be no lag on hover as the "on" state is already loaded
Much easier to maintain
Edit I'd add, you should put some real content in the links to give screenreader users something to navigate with. I'd typically use an image replacement technique for that:
<span>Buy Now</span>
.buy1 span {
position: absolute;
display: block;
top: -10000px;
left: -10000px;
font-size: 1px;
}
Using jQuery toggle-event
NOTE
The code will handle any link and image where the ID of the link and the image has some kind of match - doable with data as well but compatible with non-html5 browsers too.
You will have to provide images or classnames for each different image but the toggle script is fixed.
<!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>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var icons = {
buy:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
},
sell:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
}
}
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].on);
// OR change the className of the link
// OR use data-toggle - but no need to test the image src
},
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].off);
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="buyImg" width="115"
border="0" height="50" /></a>
<a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="sellImg" width="115"
border="0" height="50" /></a>
</div>
</body>
</html>
UPDATE Using data attributes to prove a point
<!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>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleon'));
},
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleoff'));
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="buy">
<a href="#" class="toggleLink"><img src="images/buy1.png"
data-toggleon="images/buy1.png"
data-toggleoff="images/buy2.png"
width="115" border="0" height="50" id="img" /></a>
</div>
</body>
</html>
PS: Have a look here for a great version
Element with hover then click removes hover effect and click again adds hover again with a fiddle by Greg Pettit
Use CSS selectors - like what is documented here:
http://www.w3schools.com/cssref/sel_hover.asp
if you mean more stylish there is way by css or jquery
http://www.webreference.com/programming/css_stylish/index.html
http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
It seems fine. I can think of a more elegant way, using jQuery:
First off, give each one of your elements the toggleImg class. Then, give each button the attributes data-toggleon and data-toggleoff. Remove the id and name if you desire.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggleImg").on('click',function(){
if($(this).attr('src')==$(this).data('toggleon')){
$(this).attr('src',$(this).data('toggleoff'))
}else{
$(this).attr('src',$(this).data('toggleon'))
}
});
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png" width="115" border="0" height="50" />
</div><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50" />
</div>
</body>
</html>
The code can be thus easily extended--you can just add new imgs wherever you want with the appropirate class/attributes and not worry about adding new JS.
I have the following piece of code:
$(document).ready(initialize);
function initialize() {
$('#btnPoint').css('width', $('#btnPoint').width());
}
When I debug it in Chrome $('#btnPoint').width() is 83 before the width is set. But it becomes 67 immediately after the css statement is executed.
What is going on?
EDIT
I have no particular stylesheets loaded. Here is my html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=bla-bla-bla&sensor=false&libraries=geometry">
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="sdr.js"></script>
</head>
<body>
<div style="display: table; height: 100%; width: 100%;">
<div id="data" style="display: table-row; height: 20px;">
<div style="display: table-cell;">
<input id="btnPoint" type="button" value="Mark the point" onclick="markPoint()" />
Point: <input id="txtPoint" type="text" /><br />
<input id="btnPolygon" type="button" value="Mark the polygon" />
Polygon:<input id="txtPolygon" type="text" />
</div>
</div>
<div style="display: table-row; ">
<div id="map_canvas" style="display: table-cell;"></div>
</div>
</div>
</body>
</html>
jQuery's width() doesn't contain padding or border which are default styles on a button use outerWidth() like:
$('#btnPoint').css('width', $('#btnPoint').outerWidth());
to keep your button the same size, but have the text morph to fit, check out the fitText plugin or fitText on github it's made for large display text, but might work for your needs.
I'm working on a webpage that has a javascript image rotator, but it needs to be able to handle images of different sizes.
The code that I'm using as a base has a DIV outside floating LIs which contain the images, but no matter what I try I can't seem to get the images to all be centered. The only one that's centered is the one that's the full 800px wide.
I have a feeling it's something to do with float, position, or display, but I've been messing around for hours with no luck.
Here's my site:
Here's where I borrowed the image rotator code from:
http://www.serie3.info/s3slider/ (code) http://www.serie3.info/s3slider/demonstration.html (demo)
Thanks for any help you can provide!
This works as well (In Firefox and Safari, haven't tried IE). Save as a .html for an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="A picture and caption that you can change for everyone in the world to see.">
<meta name="keywords" content="pic and words, pic words, caption">
<title>Pic and Words</title>
<link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<style>
body, html
{
margin:0px;
width:100%;
height:100%;
padding:0px;
}
#slider1
{
text-align:center;
vertical-align:middle;
margin:0px;
padding:0px;
width:auto;
height:auto;
}
#slider1Content
{
text-align:center;
display:table; /* this is KEY to centering the UL */
position:static;
margin:0px auto 0px auto;
padding:0px;
width:auto;
top:auto;
}
#pageWrapper
{
width:810px;
height:700px;
margin:0px auto 0px auto;
text-align:center;
}
</style>
</head>
<body>
<div id="pageWrapper">
<h1>Pic and Words</h1>
<!--Upload -->
<br /><br />
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg"
alt="Somewhere down Baja on the way to Cabo."
title="Somewhere down Baja on the way to Cabo." align="center" />
<span class="bottom">"Somewhere down Baja on the way to Cabo."</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg"
alt="Drunk dude on a bike"
title="Drunk dude on a bike" align="center" />
<span class="bottom">"Drunk dude on a bike"</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg"
alt="Do not want!"
title="Do not want!" align="center" />
<span class="bottom">"Do not want!"</span>
</div>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
</div>
</body>
</html>
Add:
left: 0;
padding: 0;
to the #slider1Content style.
Then delete the float: left; from the .slider1Image style.
Note that the source CSS contains this warning: "important to be same as image width" on several dimensions. Since this CSS isn't sized for each image, you'll have that white margin around each picture.
If you desire to reset those key dimensions dynamically (I think the site looks OK without this), then that is a separate question that has been answered here on SO before.