I am constructing a page with a thumbnail (beachthumb.jpg) that, with JavaScript and jQuery, should theoretically cause a full-size version of the image (beach.jpg) to appear in the space below the thumbnail. However, the full-size version isn't appearing and I cannot figure out what is causing that. Can anyone see what the problem might be?
Here's the HTML, CSS, and JavaScript (I'm positive the jQuery is correct, but if you want to see that as well, let me know and I'll add it).
Thank you in advance to anyone who can unravel this mystery!
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<script src="js/jquery-1.11.0.js"></script>
<script src="js/index.js"></script>
<title>My Name</title>
</head>
<body>
<div class="nav">
<div class="header">
<h1>My Name</h1>
</div>
<div class="links">
<ul>
<li class="travels">Travels</li>
</ul>
</div>
</div>
<div class="main">
<div class="maincontent">
<div class="thumbs">
<img src="images/beachthumb.jpg" class="beach">
</div>
<div class="big">
<img src="images/beach.jpg" class="beach">
</div>
</div>
</div>
</body>
CSS:
.nav {
margin:auto;
text-align: center;
}
.nav .header h1 {
font-family: 'Lobster', sans-serif;
color:#FF5A36;
font-size:60px;
}
.nav .links li {
display:inline;
list-style-type: none;
padding:10px;
font-size:25px;
font-family: 'Lobster', sans-serif;
font-size:30px;
color: #00A693;
}
.main {
background-image: url('images/lightcolumn.png');
width:100%;
height:100%;
position:absolute;
border-top: 2px #FF5A36 solid;
border-radius: 5px;
}
.thumbs {
display:none;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.thumbs img {
display:inline;
position:relative;
padding:10px;
}
.big img {
text-align:center;
display:none;
}
.big {
text-align:center;
}
.maincontent div {
display:none;
}
JavaScript:
$(document).ready(function () {
$('.maincontent .thumbs .beach').click(function(){
$('.maincontent .big img').hide();
$('.maincontent .big .beach').fadeIn();
});
$("ul .travels").click(function() {
$(".maincontent div").hide();
$(".maincontent .thumbs").show();
});
});
As #sahbeewah said, you are hiding div, what is parent element and then, you are going to fadeIn child element. So edit jQuery code, where thumbs is clicked and change events.
$('.maincontent .big').hide();
$('.maincontent .big').fadeIn();
Now, in CSS you don't need to hide .big img, because its parent is already hidden.
.big img {
text-align:center;
}
Here is fiddle demo.
EDIT:
Second variant, you can set selectors on img and .beach, but code will be litle changed.
$('.maincontent .thumbs .beach').click(function(){
$('.maincontent .big .beach').hide();
$('.maincontent .big .beach').fadeIn();
});
$("ul .travels").click(function() {
$(".maincontent div img").hide();
$(".maincontent .thumbs .beach").show();
});
And also, CSS need to be changed, firstly remove disaply: none; from .thumbs and then, disable display on .maincontent div children, except of divs.
.maincontent div img {
display:none;
}
Here is second demo
The reason is this line:
$(".maincontent div").hide();
This causes the div with the class big to be hidden. So it doesn't matter that you faded in its child as the parent is hidden.
Related
result
I want to make the image stay clicked.
I am using two images for each icon. one is when is not clicked. another is when is clicked. hover is working fine. but focus is not working at all.
i don't see any errors or mistakes. help me please!
this is body
body{
width:350px;
}
img {
float:left;
width:60px;
height:50px;
}
#hardy{
float:right;
}
.category{
position: fixed;
padding: 2em;
left: 0;
top: 0;
background-color:white; /*Grey*/
padding:13px;
height:57px;
width:100%;
display:inline-block;
}
.img-top {
display:none;
z-index:99;
}
#restaurant:hover .img-top{
display: inline;
}
#restaurant:hover .img-bottom{
display:none;
}
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
#hotel:hover .img-top{
display: inline;
}
#hotel:hover .img-bottom{
display:none;
}
#pub:hover .img-top{
display: inline;
}
#pub:hover .img-bottom{
display:none;
}
#park:hover .img-top{
display: inline;
}
#park:hover .img-bottom{
display:none;
}
#tourism:hover .img-top{
display: inline;
}
#tourism:hover .img-bottom{
display:none;
}
<div class="listView">
<div class="category">
<span id="restaurant">
<img src="./resources/icons/category/restaurant_list_icon.png" alt="restaurant" title="restaurant" class="img-bottom">
<img src="./resources/icons/category/restaurant_list_selected_icon.png" alt="restaurant" title="restaurant" class="img-top">
</span>
<span id="hotel">
<img src="./resources/icons/category/hotel_list_icon.png" alt="hotel" title="hotel" class="img-bottom">
<img src="./resources/icons/category/hotel_list_selected_icon.png" alt="hotel" title="hotel" class="img-top">
</span>
<span id="pub">
<img src="./resources/icons/category/pub_list_icon.png" alt="pub" title="pub" class="img-bottom">
<img src="./resources/icons/category/pub_list_selected_icon.png" alt="pub" title="pub" class="img-top">
</span>
<span id="tourism">
<img src="./resources/icons/category/tourism_list_icon.png" alt="tourism" title="tourism" class="img-bottom">
<img src="./resources/icons/category/tourism_list_selected_icon.png" alt="tourism" title="tourism" class="img-top">
</span>
<span id="park">
<img src="./resources/icons/category/park_list_icon.png" alt="park" title="park" class="img-bottom">
<img src="./resources/icons/category/park_list_selected_icon.png" alt="park" title="park" class="img-top">
</span>
</div>
</div>
it doesn't seem like focus is working.
only hover is working. I've looked for the answer through googld but can't find.
can anyone have the answer why focus is not working? thank you!!!
Wrong Style You Added
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
Current Style is
#restaurant .img-top:focus {
display: inline;
}
#restaurant .img-bottom:focus {
display: none;
}
#restaurant ids main Div and .img-bottom is sub img tag
Hover and Click
Well the focus pseudo class wont work, because the hover pseudo class changes the state of the element when the cursor hovers away.
So in order to achieve this task we can create a custom class ( selected in the example below -- run the snippet ) using jquery and add or remove it on click events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>peedikayil</title>
<style>
img{ width:200px; overflow:hidden; }
.clickme:hover #item1{display: inline;}
.clickme:hover #item2{display: none;}
.clickme #item1{display:none;}
.clickme #item2{display:inline;}
.selected #item1{display:inline;}
.selected #item2{display:none;}
</style>
</head>
<body>
<a href="" class="clickme">
<span id="item1">
<img src="http://www.clker.com/cliparts/3/7/7/f/1268838238959637666link-zelda_red_mini-hi.png" alt="restaurant" >
</span>
<span id="item2">
<img src="https://static.giantbomb.com/uploads/scale_small/0/5128/318633-zww_link11.jpg" alt="restaurant" >
</span>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var clicked = false;
$('.clickme').on('click',function(e){
e.preventDefault();
this.clicked = !(this.clicked);
if(this.clicked){
$('.clickme').addClass('selected');
}else{
$('.clickme').removeClass('selected');
}
});
});
</script>
</body>
</html>
Use javascript instead. Here's a sample implementation for you. I've used text instead of image since I don't have images here, just replace those with your images.
HTML code should be like this
<ul>
<li>Item 1 <!--add your original image here--></li>
<li>Item 2 <!--add your original image here--> </li>
</ul>
CSS
.selected#item1{color:#f00; /*you can use background: url(yourimagepath); here instead of color */}
.selected#item2{color:#0f0; /*you can use background: url(yourimagepath); here instead of color */}
JS
$('.clickme').on('click',function(e){
e.preventDefault();
$('.clickme').removeClass('selected');
$(this).addClass('selected');
});
Here's a working sample in jsfiddle
Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}
There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview
Hey guys I'm new to jQuery and having a ton of trouble making things on my own. I'm trying to change the styling of to the css class .change, but it isn't working. Really need some help. Thanks in advance.
$(document).ready(function() {
$('#button').click(function() {
$(this).addClass('change');
})
})
html body {
margin:0;
padding:0;
background-color:#3366CC;
}
.main .container {
margin-top:0;
text-align:center;
padding:5%;
}
.main h1 {
color:white;
font-size:100px;
text-transform:uppercase;
}
.main h3 {
color:white;
font-size:50px;
}
.main #button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.change {
background-color:black;
}
<DOCTYPE!html>
<html>
<head>
<title>Community-Help yours today</title>
<link rel='stylesheet' type='text/css' href='community.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='community.js'></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Community</h1>
<h3>Start an initiative, gain support, build your project</h3>
<div id="button">Get Started</div>
</div>
</div>
</body>
</html>
You'd be best off doing this:
.button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.button--changed {
background-color:black;
}
Add a class for the css directly to the button.
Then toggling the .button-changed class. This keeps your specificity down and you won't encounter similar problems further down the line.
By adding more specificity, such as by doing .main #button.changed you just defer the same problem further down line. Imagine if you then need to add a second changed state for some reason?
Also, you don't now have to contain your .button within main in order to use it's styles and by using a class you can validly re-use the button on the page, but these are bonus point.
Here are some references to further explain ...
http://www.impressivewebs.com/css-specificity-irrelevant/
http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/
.change style is being overridden by .main #button style that's why the black background color is not being applied. You will see that it is being overridden from the developer tools. I suggest you read more about Specificity on CSS: https://css-tricks.com/specifics-on-css-specificity/
try to this css
.main #button.change {
background-color:black;
}
because you used to this
.main #button {color:white;}
than click to button add class .change but class .change does not apply becuase you button id is more than power full you .change class
so that you can power full you class than used to this .main #button.change
Demo
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass('change');
})
})
html body {
margin:0;
padding:0;
background-color:#3366CC;
}
.main .container {
margin-top:0;
text-align:center;
padding:5%;
}
.main h1 {
color:white;
font-size:100px;
text-transform:uppercase;
}
.main h3 {
color:white;
font-size:50px;
}
.main #button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.main #button.change {
background-color:black;
}
<DOCTYPE!html>
<html>
<head>
<title>Community-Help yours today</title>
<link rel='stylesheet' type='text/css' href='community.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='community.js'></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Community</h1>
<h3>Start an initiative, gain support, build your project</h3>
<div id="button">Get Started</div>
</div>
</div>
</body>
</html>
and used to toggleclass
Change .change to #button.change to make this as high priority than #button
Like this :
#button.change {
background-color:black;
}
And use toggleClass instead of addClass to have toggle effect.
Demo URL
I have below code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css"/>
ul.tabs {
float:left;
list-style:none;
height:22px;
width:100%;
border-radius:8px 0 -50px 0;
margin:0;
padding:0;
}
ul.tabs li {
float:left;
height:21px;
line-height:21px;
border:1px solid #999;
overflow:hidden;
position:relative;
background:#ADD8E6;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
margin:0 2px -1px 0;
padding:0;
}
ul.tabs li a {
text-decoration:none;
color:#000;
display:block;
font-size:1em;
border:1px solid #fff;
outline:none;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding:0 20px;
}
ul.tabs li a:hover {
background:#ADD8E6;
}
html ul.tabs li.active,html ul.tabs li.active a:hover {
background:#fff;
border-bottom:1px solid #fff;
}
.tabContainer {
border:1px solid #999;
overflow:hidden;
clear:both;
float:left;
width:100%;
background:#fff;
-webkit-border-radius:8px;
-webkit-border-top-left-radius:0;
-moz-border-radius:8px;
-moz-border-radius-topleft:0;
border-radius:8px;
border-top-left-radius:0;
}
.labelStyle{
font-weight:bold;
font-size:1.5em
}
.tabContent {
font-size: 12px;
padding:20px;
}
.chkAlign{
margin-left:143px
}
</style>
<script>
$(document).ready(function() {
//hiding tab content except first one
$(".tabContent").not(":first").hide();
// adding Active class to first selected tab and show
$("ul.tabs li:first").addClass("active").show();
// Click event on tab
$("ul.tabs li").click(function() {
// Removing class of Active tab
$("ul.tabs li.active").removeClass("active");
// Adding Active class to Clicked tab
$(this).addClass("active");
// hiding all the tab contents
$(".tabContent").hide();
// showing the clicked tab's content using fading effect
$($('a',this).attr("href")).fadeIn('slow');
return false;
});
});
</script>
</head>
<body>
<ul class="tabs">
<li>SEO</li>
<li>Attributes</li>
<li>Classification SIC</li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=sic&gid=138370"></iframe>
</div>
<div id="tab2" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=some&gid=235"></iframe>
</div>
<div id="tab3" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=uk&tab=sic&gid=789"></iframe>
</div>
</div>
</body>
</html>
On click of each tab, i need render some page in an iframe. But above code is not working. Am i doing anything wrong here?
How can i do this?
first thing first it may be that the header send by the iframe is X-Frame-Options so the website refuses to response in the iframe.
your url seems wrong, space avec the double quote of the src and the port of the website should be followed by a /
try to replace your adresses by a local file on your post. Your code should work.
I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>