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
Related
I am trying to show products and when I apply the animation it applies to the whole div
for instance
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
$(document).ready(function()
{
$(".product_area").slideUp(); //Whole div slides up.
$(".product").slideUp(); //Just one product slides up.
}
What I want that one by one the product slides in from right.
Check this out
$(function(){
//$(".product_area").slideUp(); //Whole div slides up.
//$(".product").slideUp(); //Just one product slides up.
var delay = 500
$('.product').each(function(){
$(this).delay(delay).toggle( "slide" );
delay = delay+1500;
});
});
/* Put your css in here */
.product {
display:none;
width:100px;
background-color:#ccc;
padding:15px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
</body>
</html>
I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.
Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
My CSS for the caption:
.nivo-caption1 {
position: absolute;
margin:auto;
top: 5%;
overflow:hidden;
background:none;
font-family: 'Gotham';
color:#FFF;
font-weight:bold;
font-size:50px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.
Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?
Attached is a photo of how it looks now..
Any help would be great!
Thanks,
Maxenter image description here
The reason margin:auto isn't working for this particular case is two-fold.
You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.
It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.
In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.
Something like this might help:
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
Here is a slimmed down working example:
https://jsfiddle.net/sm1215/ma645ao8/2/
When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
This assumes you don't have other elements that force that element to not be able to move.
So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.
I added some bits of code to the css and it solved everything.
My HTML is exactly the same as above:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
The New CSS for the NivoCaption container:
/* Caption styles */
.nivo-caption {
position: absolute;
justify-content: center;
margin-left: -150px;
margin-top: -200px;
width: 100%;
font-family: 'Gotham', sans-serif;
color:#FFF;
font-weight:bold;
font-size:45px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
.nivo-caption1 {
position: absolute;
margin: auto;
margin-top:5px;
}
The pieces I added to ensure center alignment were:
justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;
Now I just have to figure out solutions to the other bugs with this slider:
pauseTime not being applied to all slides.
Delay on caption load.
Cheers for your helps guys!
Max
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!
Placing a tab container on titlepane looks weird in any browser but if I use the dojo v1.6 it appears perfectly. Am I doing something wrong here while porting code to 1.8.4 Or something broken in later versions?
Please change the dojo version in this code and see the difference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/**1.6**/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.TabContainer");
//require(["dojo/dnd/move", "dojo/_base/declare", "dojo/dom-construct", "dijit/layout/TabContainer", "dijit/TitlePane", "dijit/layout/BorderContainer", "dojox/layout/ExpandoPane", "dojo/domReady!"]);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
<div dojotype="dijit.layout.ContentPane" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">
<div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">
<div id="titlepane" dojoType="dijit.TitlePane" title="Show Tabs" closable="false" open="false">
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
<div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
Tab 1 content
</div>
<div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
Tab 2 content
</div>
<div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
Tab 3 content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Two problems. First, the code has TitlePane inside of a BorderContainer, but TitlePane is not designed to reside inside of layout widgets:
It extends ContentPane but since it isn’t used inside other layout widgets
Second, as written, the TabContainer inside the title pane needs an absolute height, not relative. You can get away with a relative height for TabContainers inside of BorderContainers (or other layout widgets), because BorderContainer calculates the absolute height for you. Since TitlePane does not provide that calculation, you must specify an absolute height...
or, you can tell TabContainer not to do its own layout with "doLayout=false":
<!DOCTYPE html>
<html>
<head>
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
</head>
<body class='claro'>
<div data-dojo-id='titlePane' data-dojo-type='dijit/TitlePane' data-dojo-props='region:"trailing"'>
<div data-dojo-id='tabContainer' data-dojo-type='dijit/layout/TabContainer' data-dojo-props='doLayout:false'>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 1"'>Hi!</div>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 2"'>There!</div>
<div>
</div>
<script type='text/javascript'>
require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
ready(function () {
Parser.parse().then(function () {
});
});
});
</script>
</body>
</html>
You can replace the data-dojo-props on the TabContainer with style='height:100px;' and get a similar effect. The only difference is that doLayout false uses the auto height from the contained content, while height:100px gives you a static height.
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.