Code to display three buttons. The CSS class 'hidden' hides the buttons on clicking the element with tag . The code works fine but the size of the 'div' box (id='switcher') reduces when the buttons are hidden.
How do I maintain the original size even though the buttons are hidden?
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher button').toggleClass('hidden');
});
});
.hidden{
display:none;
}
.switcher{
float:right;
border:1px solid #000;
background-color:#ddd;
margin:10px;
font-size: .9em;
padding:10px;
}
<html>
<head>
<link type='text/css' rel='stylesheet' href='01.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript' src='jqScripts.js'></script>
</head>
<body id='content'>
<div id="container">
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
</div>
</body>
</html>
Update your style to following
.hidden{
visibility: hidden;
}
For details, visibility
Use visibility: hidden; instead of display: none;
.hidden{
visibility: hidden;
}
Css solution 1:
.hidden{
visibility: hidden;
}
Css solution 2:
.hidden{
opacity: 0;
}
Jquery Solution 1 (fixing the height of parent div):
$(window).laod(function(){
var initialHeight=$('#switcher').height();
$("#siwtcher").height(initialHeight);
})
Jquery solution 2:
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher button').fadeTo(0);
});
});
You should use visibility: hidden; instead of "display:none;"
so, update your CSS as below,
.hidden{
visibility: hidden;
}
The reason for using visibility: hidden; instead of "display:none;", is below:
display:none Tag is not visible, also no space allocated for it.
visibility:hidden Tag is not visible, but space is allocated for it on the page.
$(function(){
$('#showall').click(function(){
$('.targetDiv').show();
});
$('.showSingle').click(function(){
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).show();
});
});
body{
width:100%;
height:100%;
background: #eee;
}
div.menu{
margin: 5% 10%;
background: transparent;
}
a, #showall{
display:inline-block;
margin:0 1%;
padding:2%;
border-radius: 10%;
-webkit-box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
}
a:nth-child(1){
background:#E63946;
color: #eee;
}
a:nth-child(2){
background:#F1FAEE;
color: #222;
}
a:nth-child(3){
background: #A8DADC;
color: #222;
}
a:nth-child(4){
background: #457B9D;
color: #eee;
}
a:nth-child(5){
background: #1D3557;
color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></style>
<div class="menu">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<section class="cnt">
<div id="div1" class="targetDiv">Content 1</div>
<div id="div2" class="targetDiv">Content 2</div>
<div id="div3" class="targetDiv">Content 3</div>
<div id="div4" class="targetDiv">Content 4</div>
</section>
Related
This is my blog - http://quickeasycoder.blogspot.com/2018/07/code-player.html
It is not working as same as it was working in my browser. Every section up there in the blog come and merge upon each other.
This is working perfectly in my Google Chrome but it's not the case when I have uploaded it to my Blogger post. I think code is perfect but the thing may be in the layout of the blog. What should be done now?
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
padding:0;
margin:0;
}
#header {
width:100%;
background-color: #EEEEEE;
padding:5px;
height: 30px;
}
#logo {
float:left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width:233px;
margin: 0 auto;
}
.toggleButton {
float:left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.highlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float:left;
width: 50%;
border-left: none;
}
iframe {
border:none;
}
.hidden {
display: none;
}
#intro{margin:10px;
font-weight:bold;
font-size: 20px;
}
</style>
</head>
<body>
<p id="intro"> Learn HTML| CSS| JAVASCRIPT without any text-editor by using Code-Player <br>
Built using HTML| CSS| JAVASCRIPT| jQuery</p>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p></textarea>
<textarea id="cssPanel" class="panel hidden"> p { color: green; }</textarea>
<textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph").innerHTML = "Hello Rob!";</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
function updateOutput() {
$("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
}
$(".toggleButton").hover(function() {
$(this).addClass("highlightedButton");
}, function() {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
var numberOfActivePanels = 4 - $('.hidden').length;
$(".panel").width(($(window).width() / numberOfActivePanels) - 10);
})
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width(($(window).width() / 2) - 10);
updateOutput();
$("textarea").on('change keyup paste', function() {
updateOutput();
});
</script>
</body>
</html>
Since a lot of blog platforms prohibit embedding code sometimes you are able to accomplish the task by using an <iframe> similar to what is here
<iframe height='265' scrolling='no' title='BPaNNq' src='//codepen.io/happymacarts/embed/BPaNNq/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/happymacarts/pen/BPaNNq/'>BPaNNq</a> by Joseph L. Bradfield (<a href='https://codepen.io/happymacarts'>#happymacarts</a>) on <a href='https://codepen.io'>CodePen</a>.
or something like this one i found (looks familiar)
<iframe height='265' scrolling='no' title='Code player' src='//codepen.io/akashdevgan/embed/JGbGOQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/akashdevgan/pen/JGbGOQ/'>Code player</a> by Akash Devgan (<a href='https://codepen.io/akashdevgan'>#akashdevgan</a>) on <a href='https://codepen.io'>CodePen</a>.
I don't think that it works to embed in the snippet here but this might work on your blogger site try it out
As I couldn't debug yours, wrote my own version of codeplayer.
You may need to refer these. Make HTML elements as contenteditable, CSS Custom Variables
$(document).ready(function(){
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
$(".codetype").click(function(){
$(this).hasClass("active") ? $(this).removeClass("active") : $(this).addClass("active");
$(".codecontent").eq($(this).index()).toggle();
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
});
});
.container
{
width:100%;
height:400px;
max-height:400px;
border:1px solid black;
}
.header
{
position:relative;
width:100%;
height:50px;
background: red;
box-sizing: border-box;
text-align:center;
color:white;
}
.codetype
{
border:1px solid black;
width:100px;
height:40px;
margin:0 auto;
display:inline-block;
}
.codetype > span
{
text-align:center;
line-height:40px;
}
.codetype:first-child
{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.codetype:last-child
{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
.body
{
height:100%;
display:inline-block;
width:100%;
}
.codecontent
{
height:100%;
width:var(--contentwidth);
background:yellow;
border:1px solid black;
float:left;
box-sizing:border-box;
}
.active
{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div id="" class="codetype active"><span>HTML</span></div>
<div id="" class="codetype active"><span>CSS</span></div>
<div id="" class="codetype active"><span>JS</span></div>
<div id="" class="codetype active"><span>Output</span></div>
</div>
<div class="body">
<div id="" class="codecontent" contenteditable=true>HTML</div>
<div id="" class="codecontent" contenteditable=true>CSS</div>
<div id="" class="codecontent" contenteditable=true>JS</div>
<div id="" class="codecontent">Output</div>
</div>
</div>
I have a single page site with lots of contents and a sticky sidebar navigation on the left. I am trying to get the page to scroll down to the corresponding section in the contents div whenever a menu item is selected. This is probably really basic stuff but I just can’t wrap my head around it (been trying out various solutions, without success – see code below).
I am relatively new to javascript and jquery and would be very grateful for ideas/ suggestions.
What I managed to do so far:
The sidebar menu is sticky.
The active state of the links in the sidebar nav changes when a menu item is selected.
I also managed to get the elements in the contents div to change active state whenever the corresponding nav menu item is selected.
All that is missing now is for the menu links to work and actually push down the page to the right section ids.
Again, sorry if this is a really dumb question, I am grateful for any suggestions.
$(function() {
$('.feature_tab').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.features_public_content_container');
var allTabs = featureGroup.find('.feature_tab');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
});
//show what we need
$('.feature_box.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1000);
return false;
});
});
});
.hidden {
display:block;
color: blue;
}
.features_page {
margin-top:65px;
position: relative;
}
.features_public_content_container {
width:100%;
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:0 40px
}
#left_sidebar {
height: 100% !important;
width: 20%;
border: 4px solid green !important;
position: absolute;
float: left
}
#right {
border: 4px solid pink !important;
height: auto;
max-width:80%;
top: 0;
right: 0;
float: right;
position: relative;
}
.features_page .sidebar_nav_container {
margin:45px auto;
background: yellow;
position: relative;
float: left
}
.features_page .sidebar_nav_container .feature_tab {
float:none;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
font-size:12px;
border-left:1px solid #efefef !important;
text-transform:uppercase;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.features_page .sidebar_nav_container .feature_tab .indicator {
position:absolute;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.features_page .sidebar_nav_container .feature_tab:hover .indicator {
display:block;
border-left:4px solid #d6ecfd
}
.features_page .sidebar_nav_container .feature_tab.selected .indicator {
display:block;
border-left:4px solid #1193f6;
}
.features_page .feature_boxes_container {
padding-bottom:80px;
padding-top:45px;
text-align: center;
background: #f2f2f2;
}
.features_page .feature_boxes_container .feature_box {
background:#fff;
display:inline-block;
height:210px;
width:235px;
margin:12px;
padding: 24px;
text-align:center;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.features_page .feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}
.features_page .feature_boxes_container .feature_box .feature_overview_icon {
padding: 18px
}
.features_page .feature_boxes_container .feature_box.active .feature_overview_icon {
color: #1193f6;
}
.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
color: #363636;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body id='public_layout' class='with_header'>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container">
<div class="col span_2" id="left_sidebar">
<div class="sidebar_nav_container">
<div class="feature_tab indicator feature_category_A selected" rel="A">Features A</div>
<div class="feature_tab indicator feature_category_B" rel="B">Features B</div>
<div class="feature_tab indicator feature_category_C" rel="C">Features C</div>
<div class="feature_tab indicator feature_category_D" rel="D">Features D</div>
<div class="feature_tab indicator feature_category_E" rel="E">Features E</div>
</div>
</div> <!-- / sidebar navigation -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<div id="A"> <!-- START A Features -->
<div class="feature_box feature_category_A active">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
</div>
<div id="B"> <!-- START B Features -->
<div class="feature_box feature_category_B in-active">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
</div>
<div id="C"> <!-- START C Features -->
<div class="feature_box feature_category_C in-active">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- /.col .span_10 -->
</div> <!-- /.public_content_container -->
</div> <!-- /.features_page -->
</div> <!-- /.layout_wrapper -->
</body>
</html>
Probably you want this:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
JSFiddle
Please also see these questions:
Simple jQuery scroll to anchor up or down the page...?
Smooth scrolling when clicking an anchor link
And also you can use plugin to do this. like FullPage
Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more..
I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}
You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
I don't understand your question properly. But if you are trying to make different div elements visible upon clicking different links, then this is what you should do:
<div id = "anchor-div">
<ul>
<li> <a id="about-anchor" href="javascript:;"> About</a> </li>
<li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
</ul>
</div>
<div id="content-div">
<div id="about-content"></div>
<div id="help-content"></div>
</div>
$(document).ready(function(){
//if you wish to keep both the divs hidden by default then dont forget to hide //them
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#help-content").show();
$("#about-content").hide();
});
});
Also don't forget to add jQuery library.
I'm trying to build an image gallery with description when moving over the image.
The code looks good but nothing happens when you move the mouse cursor over the image.
My problem is when I running the code the "<div class='description_content'>" does not appear.
Thx for any help.
good examle
wrong code
HTML CODE:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 2.5;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-302'+'px'
});});
});
//********************************************** div.description
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('#portfolio-tiles li').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class description
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
};<!-- End onload;
// end hide -->t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
//$('#stop').click( function(){
//clearInterval(t);
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item1" src="p2.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item1" src="p3.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item1" src="p5.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
CSS CODE:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 220px;
width: 652px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
position:relative;
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 2.5px 0px 2.5px;
width: 309px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-302px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 15px 15px 15px 15px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it */
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.description_content{
padding:10px;
}
You can use $('li').hover() and $(this).find('.description') to achieve this.
Replace this piece of code...
$('#portfolio-tiles li').hover(function(){
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).children('.description').stop().fadeTo(500, 0);
});
with this...
$('li').hover(function(){
$(this).find('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).find('.description').stop().fadeTo(500, 0);
});
I am using the script at slidesjs.com (http://slidesjs.com/examples/simple/), trying to put it into my webpage. I decided to use a script and not just attempt to write it in jQuery myself as I could not get it to work, and I suspect the same problem is occurring here..whatever it may be. Here is the page source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Smith</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#sections').slides({
preload: true,
generateNextPrev: true
container: 'sections_container'
});
});
Web Developer
John Smith
This text is purely to fill space until I add real content.
</p>
<p id="contact">If you'd like to contact me about anything, don't hesitate to email me at j.smith#example.com</p>
<div id="social_media"><img src="images/social_media/facebook.png" /><img src="images/social_media/twitter.png" /><img src="images/social_media/flickr.png" /><img src="images/social_media/youtube.png" /></div>
<div class="clear"></div>
</div>
<div>
<h3 class='heading'>Information</h3>
<p>
<ul>
<li><strong>Name:</strong> John Smith</li>
<li><strong>Location:</strong> Sydney, Australia</li>
</ul>
</p>
<br />
<h3 class='heading'>Achievements & Experience</h3>
<p>
<ul>
<li>Worked at Google</li>
<li>Worked at McDonalds</li>
</ul>
</p>
</div>
</div>
</div>
</body>
The CSS if anyone is interested.
* {
padding:0;
margin:0;
}
a {
color:white;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
background: url('images/background.png');
font-size:12px;
font-family:arial;
color:#E5E5E5;
}
.sections_container {
width:768px;
display:none;
}
li {
margin-left:20px;
}
.sections_container div {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
display:block;
}
.pagination {
list-style:none;
margin:0;
padding:0;
}
/*
Optional:
Show the current slide in the pagination
*/
.pagination .current a {
color:red;
}
.top {
margin: 15px auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
.section {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
h1,h2,h3,h4,h5,h6 {
}
#subtitle {
color:#919191;
text-align:right;
}
#title {
text-align:right;
}
#profile {
float:left;
height:52px;
width:52px;
}
#youtube_video {
float:right;
padding-left:10px;
}
#contact {
margin-top:8px;
font-weight:bold;
font-style:italic;
}
#social_media {
margin-top:40px;
text-align:center;
}
.heading {
text-align:center;
}
.demphasis {
color:#9E9E9E;
}
.clear {
clear:both;
}
Thanks!
OK. I can see a couple of wee issues.
Firstly, in your CSS you reference .section_container, whereas in the HTML it's <div class="sections_container"> - note the 's' in the middle. Same for section/s.
Secondly, it looks like SlideJS defaults to "slides_container". Either rename your divs, or set the container name when you're initializing it:
$('#sections').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
I've created a little jsFiddle at http://jsfiddle.net/jCFeQ/ - it still has some issues, but is closer to working than when we started. Change those two things and see how you go.
It appears you have a typo in your CSS that refers to a missing HTML element:
.section_container div {
...
}
Instead of .section_container, your CSS should be .sections_container (note the plural) which matches your HTML:
<div class="sections_container">
<div></div>
...
<div></div>
</div>
Additionally, the Slides jQuery Plugin expects an HTML element with a class of .slides_container as the parent of the slides.
Since you've deviated from the default markup, you'll need to supply the plugin's container option in your jQuery function:
<script>
$(function(){
$('.sections_container').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
});
</script>
Silly question, but given you've copied the code letter-for-letter from that example: Is the file you reference in <script src="js/slides.min.jquery.js"></script> actually there - do you have a js folder with that file inside it?
Also version 1.5.1 of jQuery is quite out-of-date. It shouldn't make any difference, but you might as well change that to 1.7.1