I have input form and sticky menu whenever scroll page bottom of B element my sticky menu appears but I want to check if my input is empty than show if is not there is no reason be apper how to do that ?
my structure
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<input type="text" class="input" value="">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
JS
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
my structure I added input control like this;
$(function() {
var input = $("input").val();
if(input==""){
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
}
});
but didn't work.
click to see demo
This is really simple, this code will check if the input is empty too and if it's empty will show you the sticky bar.
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height() && $("input").val() == ""){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
NOTE: By the way I recommend you to take a course about logic and jQuery in order to solve this kind of things, because people here is going to help you solve your problems, but they aren't going to write it down for you normally. There are really good courses about it out there, take some time and you'll be able to solve this kind of problems easily. Keep up the good work I know you can ;)
Related
Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.
my codes
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
(in my css I have sticky element which is none appear)
JQUERY
$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});
click to see on codepen
I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
Suggested Solution:
Add this to your jquery code:
$(function() {
var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$(".sticky").show(); //show the sticky element
} else {
$(".sticky").hide();//hide the sticky element
}
});
});
Whenever I scroll page down to bottom of B element my sticky element must appear
If I scroll page up to top of my B element my sticky must be hidden
You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it)
The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. This can get rather expensive for performance. Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called.
$(function() {
var $sticky = $('ul.sticky');
var bToTop = $('.b').scrollTop();
$(window).scroll(function() {
if($(document).scrollTop() > bToTop){
$sticky.show();
}
else {
$sticky.hide();
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop();
codepen
$(document).on("scroll", function() {
if ($(document).scrollTop() >= 600) {
$("ul").css({"display":"initial"});
}
if($(document).scrollTop() <=600) {
$("ul").css({"display":"none"});
}
});
This should be the proper and correct solution.
Just change the display: none to visibility: hidden;.
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
$(".sticky").css({
"visibility": "visible"
});
} else {
$(".sticky").css({
"visibility": "hidden"
});
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
visibility: hidden;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
.show{
display:block;
}
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
I have a primary and secondary navigation, when the user clicks a link the background-image of this link will change to an "active" state and reset all other links to "inactive". This works fine for my primary navigation, but my secondary navigation is not resetting resulting in all of my links having an active state. My Code:
HTML
<nav id="menu">
<div id="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
</div>
</nav><!--END MENU-->
<div id="upperContent-title">Welcome</div>
<div id="upperContent-body">
Welcome Text
</div>
<img id="upperContent-img" src="img/welcomeImg.png"/>
</div><!--END UPPER CONTENT-->
<nav id="middleNav">
<div id="middleContainer">
Link 7
Link 8
</div>
</nav><!--END MIDDLE NAV-->
CSS:
#menu{
background-image:url(../menuBottom.jpg);
background-repeat:repeat-x;
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:4px;
width:1024px;
height:25px;
}
#container{
position:absolute;
margin-left:200px;
margin-top:-3px;
height:24px;
}
nav a[id*="menu"]{
background-image:url(../mainNav.png);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#000;
margin-left:-4px;
padding-top:5px;
margin-top:3px;
padding-bottom:10px;
width:129px;
height:25px;
}
#upperContent{
background-image:url(../upperWelcome.jpg);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:1024px;
height:306px;
}
#upperContent-title{
margin-left:60px;
padding-top:40px;
font-family:Arial,sans-serif;
font-size:36px;
color:#00853f;
width:459px;
}
#upperContent-body{
margin-left:60px;
padding-top:10px;
font-family:Arial,sans-serif;
font-size:14px;
color:#000000;
width:459px;
}
#upperContent-img{
position:absolute;
margin-left:578px;
margin-top:-183px;
}
#middleNav{
background-image:url(../middleNavBG.jpg);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:1024px;
height:43px;
}
#middleContainer{
margin-left:57px;
}
nav a[id*="middleNav"]{
background-image:url(../middleNavRect.jpg);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#FFF;
margin-left:-4px;
padding-top:8px;
margin-top:3px;
width:116px;
height:37px;
}
nav a[id*="middleNavCorner"]{
background-image:url(../middleNavRound.png);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#FFF;
margin-left:-4px;
padding-top:8px;
margin-top:3px;
width:116px;
height:37px;
}
JS:
//Initialize Document.ready
$(function(){
//Navigation
//Main Nav
$("a[id*='menu']").on({
click:function(e){
$("nav a[id*='menu']").css('background-image','url(urlHere/mainNav.png)');
$(this).css('background-image','url(urlHere/mainNavVisit.png)');
}
});
//Secondary Nav
$("a[id*='middleNav']").on({
click:function(e){
$("nav a[id*='middleNavLink']").css('background-image','url(urlHere/middleNavRect.jpg');
$(this).css('background-image','url(urlHere/middleNavRectVisit.jpg)');
}
});
});//End Document.ready
JSFiddle:
JSFiddle Of Intended Result
Any help would be greatly appreciated thanks!
This issue appears to have been within my .js document. I copied over the working code from my primary nav and used it for my secondary nav and it appears to work fine, trying to isolate the exact cause of the initial issue, but it appears to have been some sort of targeting or misspelling. thanks.
Hi everyone i have one question about jquery textcomplete.
I think this is easy but i don't know how can i do that.
I created this DEMO without jquery
So what is my question. I want when i write in textarea open parenthesis ( then .textBox div automatically open.
How can i do that anyone can tell me?
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
CSS
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
You can do something like this.
UPDATED
$(document).ready(function(){$('#textarea').keyup(function(){
if(($('#textarea').val() =="(" || $('#textarea').val().indexOf("(")>0) && $('#textarea').val().lastIndexOf("(") == $('#textarea').val().length-1 ){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
});
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
See the Working Fiddle Using regex instead of several conditions :
JS :
$(function(){
$('#textarea').keyup(function(){
if($(this).val().match(/([(]$)/g)){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
})
I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.
The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck