I'm just starting to learn about jQuery and I believe I have run into a road block. Essentially what I have is a that represents a clickable area with an inside. So I'm trying to use this code:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
Where #side_menu_icon is the clickable area and #side_menu is just a placeholder with width,height, and color temporarily. By default I've set this <div> to display:none; because the example I was looking at did the same thing, assuming the jQuery function would set it to visible. When I click the area nothing happens, I've tried attaching the #side_menu_icon to both the <img> and the <div>. I think there might be something I don't understand about the and how documents inherit the code from one another so I'll include that as well:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js is the file that calls the jQuery functions above.
Thanks for your time, I hope this is enough information for a solution.
EDIT:
Cut down version of HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
Relavent sections being
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
and
<div id="side_menu">
</div>
CSS:
body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
Relevant parts being #side_menu and #side_menu_icon I guess.
I found the solution to my question, some of the CSS was disrupting jQuery's ability to work properly. I will just have to find some way around that.
Related
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
I have created HTML Page which I will be make dynamic using Spring MVC.
I am new to HTML, CSS,JS as well but I need to create banner images which will slide with certain internal.
I need to do following things:
Bannner Image shoule slide with certain interval.
I need to put Fixed HTML Search form on the top of sliding images.
Currently banner image is coming as center of the page I need to stretch to total with with of the page I have tried to change like ".imageslide{width:100%;.." width 100% but it did not work.
I Need to create exactly like bellow image:
Sliding banner Image I am able to make with the below HTML and JS code but Search Form on the top of sliding banner image I am not getting idea how can i make it:
I have seeing this link but I could not make solution out if it :(.
index.html
<htm ng-app>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="./angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="withinheader">
this is header
</div>
</div>
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="2">
<img src="./S_43_HomeDestinationImages_FriMar042016420.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="3">
<img src="./S_43_HomeDestinationImages_FriMar042016575.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="4">
<img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
</div>
</div>
<div id="mainbody">
this is body
</div>
</body>
</html>
script.js
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
style.css
/* Styles go here */
#header {
background-color: #FFFFFF;
width:100%;
height:100px;
border-bottom: 4px solid #EE514B;
}
.slideshow {
font-family: "Arial", sans-serif;
text-align: center;
position:relative;
width:600px;
overflow:hidden;
background: #1a1a1a;
margin: 0 auto;
color: white;
text-shadow: 1px 1px 1px #000;
border-radius: .3em;
margin-top: 30px;
}
#withinheader {
width:60%;
margin: 0 auto;
height: 100px;
}
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
overflow:hidden;
position:relative;
text-align: center;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-enter.animate-enter-active {
left:0;
}
.animate-leave {
left:0;
}
.animate-leave.animate-leave-active {
margin-left:-100%;
}
#mainbody {
background-color: #FFFFFF;
width:50%;
min-height:1024px;
height: auto;
border-radius: 5px;
border: 1px solid #EEEEEE;
margin: 0 auto;
}
Please help me on this
I need make this webpage using Angular JS, and MVC, how should I approach.
Thanks in advance for help and information to make it work.
Without seeing the complete HTML, I daresay this may just be a case of adding position: relative to the wrapper div css (.imageslide), and position: absolute (along with left/right/top/bottom css declarations as appropriate) to the search form container tag css.
was testing some JQuery things (i'm new to this) but i can't make jquery work!
First it worked two or three times and then it stopped working (pretty weird) so i changed a few things and now it doesn't work at all. JQuery and script.js load but doesn't seem to work
index.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
<title>Manuel Pepe</title>
</head>
<body>
<div id="nav-bar" class="nav-bar">
<div id="container">
<img id="nav-button" class="nav-button" src="imgs/menu.png" />
<div id="nav-menu" class="nav-menu">
</div>
</div>
</div>
<div class="front-page">
<div class="logo">
<h1>Manuel Pepe</h1>
<h3>Test</h3>
</div>
</div>
</body>
</html>
main.css
html{
position:relative;
height:100%;
background-color: #6E6E6E;
}
#container{}
.nav-button{
position:absolute;
margin-top: -2px;
margin-left: 7px;
width: 32px;
height: auto;
z-index:1;
}
.nav-menu{
background-color:#424242;
position:absolute;
top:0px;
left:0px;
width: 200px;
height:100%;
}
.logo{
position: relative;
top:250px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 225px;
}
.logo h3, h1{
text-align:center;
font-family: Sansita One;
color: #222;
text-shadow: 0px 2px 3px #555;
}
.logo h1{
margin-bottom: 3px;
}
.logo h3{
margin-top: 2px;
}
.hover-rotate:hover {
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
script.js
$(document).ready(function(){
$("#nav-button").mouseover(function(){
$(this).addClass("hover-rotate");
});
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate")
})
});
Why isn't this working?
Also, is there any way to improve the JQuery code?
You can use the $() constructor instead of $(document).ready(function(){...:
$(function () {
$("#nav-button").mouseover(function(){
$(this).addClass("hover-rotate");
});
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate")
})
});
Set a timeout inside your javascript with a condition like
if (typeof jQuery != "undefined")
Seems to be working fine when I'm testing it. See this JSFiddle: https://jsfiddle.net/v1t54urc/2/
Are you sure your jQuery is loaded? Also make sure your CSS is loaded correctly. Try to use the following code in the header to be sure:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
One more thing. Don't forget the ; at the end on the code, like this:
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate");
});
Change the line to ensure that JQuery is loading correctly:
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
by
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
If you do the change and the web works, the old line can't find the "jquery-2.1.4.min.js" in the folder.
hi guys im new with web programming using html, css, javascript and jquery. i have this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My test Site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cssTest.css">
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id = "divMain">
<div id="div1">
<img src = "1.jpg" disabled="disabled">
<img src = "2.jpg" disabled="disabled">
<img src = "3.jpg" disabled="disabled">
</div>
<div id="div2">
<img src = "4.jpg" disabled="disabled">
<img src = "5.jpg" disabled="disabled">
</div>
</div>
<div id="div3">
<div class="myCanvas" width=100% height=100%; ></div>
</div>
</body>
</html>
JS :
$(document).ready (function(){
$("a").click(function(){
$(".myCanvas").fadeIn();
$(".myCanvas").html ($(this).html());
});
});
CSS :
body{
background-color: grey;
}
#div1,#div2{
border:solid;
border-color: red;
}
#div1 img{
position: relative;
border: solid;
border-color: blue;
margin:5px;
z-index:1;
}
#div2 img{
position: relative;
border: solid;
border-color: blue;
z-index:1;
}
#div3{
background-color:black;
position: relative;
position-align: center;
top:-500px;
z-index:2
}
.myCanvas{
position: relative;
background: solid;
background-color: grey;
opacity: 0.5;
width:100%;
height:100%;
display: block;
z-index:3;
}
what I am trying to do is whenever i click on an image i would like to make the image appear in the middle with an opaque background that will be covering the other images.
Thank you guys for the help and sorry for the noob question.
You could consider using Fancybox; it gives you the functionality you're looking for.
HERE you can find the solution :)
jsFiddle
HTML
<div id="privacy">OPEN ME</div>
<div id="bgrprivacy"></div>
<div id="privacyopen">
I'M OPEN!!
</div>
CSS
#privacy{
text-decoration:none;
color:#999;
font-size:12px;
cursor:pointer;
}
#privacyopen{
display:none;
background:white;
height:30%;
width:50%;
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:101;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
padding:20px;
}
#bgrprivacy{
display:none;
background-color:rgba(0,0,0,0.4);
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index:100;
width:100%;
height:100%;
cursor:pointer;
}
jQuery
jQuery(document).ready(function($){
$("#privacy").click(function(){
$("#privacyopen").fadeIn();
$("#bgrprivacy").fadeIn();
$("body").css("overflow", "hidden");
/*$("header").css("z-index", "1");*/
});
$("#bgrprivacy").click(function(){
$("#privacyopen").fadeOut();
$("#bgrprivacy").fadeOut();
$("body").css("overflow", "auto");
/*$("header").css("z-index", "1");*/
});
});
Ps: it contains some code that you don't need it because I forgot to delete it :) ( I did this for my website! )
I have recently noticed, that in some versions of Google Chrome the classic css-only sticky footer solution used by compass do not work, when contents is generated by script. The footer just cover the contents instead of moving down. The layout will change to correct one when you resize your window. The css/html in compass is based on solution provided on http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
With following html:
Any ideas, how to fix this?
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
I think you should add clear:both
.footer, .push
{
clear:both;
height: 4em;
}
or try this link
http://css-tricks.com/snippets/css/sticky-footer/
I had this problem as well. A dynamic table was getting overlapped, but none of my other pages. This solution worked for me.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; /*!! margin: 0 auto -4em; !!*/
}
html,body {
margin:0;
padding:0;
height:100%;
}
p {
margin-top:0;
}
.push{
height:4em;
}
.wrapper {
position:relative;
z-index:1;
margin:0 auto;
min-height: 100%;
height: auto;
}
.footer{
position:relative;
z-index:2;
height: 4em;
margin-top:-4em; /*!!!*/
}