jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?
looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example
please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>
Related
I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.
Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">
I have this code on a page:
Потолок +
I need my code to show a div just like in '1'. '2' - how it should be BEFORE the click.
So I need to popup of div 'remont_price_link' when user click on
This one doesn't work:
Потолок +
Sorry for silly.
Add this tou your script:
$(".remont_price_link").click(function() {
var parent = $(this).parent();
var spoiler = $(this).closest(".remont_price_item").find(".spoiler-text");
if(parent.hasClass("folded")) {
parent.removeClass("folded");
spoiler.show();
}
else {
parent.addClass("folded");
spoiler.hide();
}
});
And keep the links as they are. Like this:
Потолок +
You can show/hide your div using css 'display' and javascript.
See code here: https://codepen.io/cpenarrieta/pen/XpoExe
CSS
.hidden {
display: none;
}
.show {
display: inherit;
}
Javascript
function showDiv() {
var x=document.getElementById("divId");
if (x.classList.contains("show")) {
x.classList.add('hidden');
x.classList.remove('show');
} else if (x.classList.contains("hidden")) {
x.classList.add('show');
x.classList.remove('hidden');
}
}
HTML
<a href='javascript:;' onclick='showDiv();'>Потолок +</a>
<div id="divId" class="hidden">
div content
</div>
I would like to have a scroll to top arrow fixed in my page using angular bootstrap.
Currently I have
<div class="col-md-1">
<div class="affix">
<div>
<a th:href="#{/}" href="#" target="_self"><img id="image" src="source" alt="yoli" width="50px" /></a>
</div>
Scroll to top
</div>
</div>
<div class="col-md-6">
<div id="search-bar" ng-include="blabla"></div>
<li ng-repeat="something"></li>
</div>
However when the "Scroll to top" is click it only works first time since the url changes to ...#search-bar and when you click it again nothing happens. So how do I scroll to top without changing the url?
And also question how do I make the "Scroll to top" only show when the search-bar is not showing?
I was thinking about using $anchorScroll and using id'ed numbers on li and if it's higher then "element-3" then show the button, however not sure if that would work.
UPDATE:
I am thinking of following this example, that is using navigation bars that is #search and #results and make the #search href visible on #results active and #results one hidden.
You can do this without jQuery as well:
function filterPath(string) {
return string
.replace(/^\//, '')
.replace(/(index|default).[a-zA-Z]{3,4}$/, '')
.replace(/\/$/, '');
}
const locationPath = filterPath(location.pathname);
document.querySelectorAll('a[href*="#"]').forEach(link => {
let thisPath = filterPath(link.pathname) || locationPath;
if ((location.hostname == link.hostname || !link.hostname)
&& (locationPath == thisPath)
) {
let hashName = link.hash.replace(/#/, '');
if (hashName) {
let targetEl = document.getElementById(hashName);
if (targetEl) {
link.addEventListener('click', () => {
event.preventDefault();
targetEl.scrollIntoView({
top: 50,
left: 0,
behavior: "smooth"
});
});
}
}
}
});
Here is how you can do it. Create a button:
Scroll To Top
CSS:
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
text-decoration:none;
}
JavaScript:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
You can find a demo here. The source presented is taken from here.
I'm playing around with building a basic modal window and i want it do dissapear when i click the edges. So my problem in it's most basic form:
<div style="width:100%;height:100%;" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
What is the best way to achieve this? To use unnested divs? html/css magic?
HTML:
<div style="width:100%;height:100%;" class="outerModal">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
JavaScript:
$(document).on("click", ".outerModal", function(evt) { //listen for clicks
var target = $(evt.target ||evt.srcElement); //get the element that was clicked on
if (target.is(".outerModal")) { //make sure it was not a child that was clicked.
//hide dialog
}
});
Example:
JSFiddle
When you hide the parent tag, it automatically hides the childen tag as well, You should first contain the child div into variable and after that hide the parent div and append that stored child div into parent tag something like this.
HTML
<div id="result">
<div style="width:100%;height:100%;" id="parentDiv" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;" id="childDiv">
does not hide all onclick
</div>
</div>
</div>
javaScript
function hideAll(){
var childDiv = document.getElementById('childDiv'); //contain child div
var parDiv = document.getElementById('parentDiv');
parDiv.style.display = 'none'; //hide parent div
parDiv.parentNode.appendChild(childDiv); //append child div
}
DEMO
Assuming that "parentDiv" is to be the background and "childDiv" is to be the actual modal content, the best way I have found is to separate the divs entirely.
HTML
<div id="parentDiv" onclick="hideAll()"> </div>
<div id="childDiv" >
does not hide all onclick
</div>
Javascript using jQuery
function hideAll(){
/* The Parent Div will hide everything when clicked, but the child won't */
$('#childDiv').fadeOut(1000, function(){
$('#parentDiv').fadeOut(1000);
});
}
CSS
#parentDiv {
background: black;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
}
#childDiv {
display: block;
position: relative;
background: white;
height: 200px;
width: 200px;
z-index: 101
}
Here is a working example.
Hope this helps at all.
See this fiddle:
http://jsfiddle.net/eZp9D/
$(document).ready(function () {
$('#parentDiv').click(function (e) {
if ($(e.target).prop('id') == "parentDiv") {
$(this).hide();
}
});
});
You can use basic jQuery and style it accordingly with CSS.
Check this example.
If you want to have it disappear by clicking outside of the dialog window, make sure that onClick you perform this action:
$( "#dialog_id" ).dialog( "close" );
Maybe I am going about this wrong, but I have a form with part of it's content temp removed ...
.form_jquery {display: none;}
and I am displaying the content when the parent div and title are hovered...
$(document).ready( function () {
$(".deliver").hover(
function () {
$(".form_jquery").css({'display':'block'});
},
function () {
$(".form_jquery").css({'display':'none'});
}
)
});
The problem is, I have a "main content" area under this form title/toggle and when we...
css({'display':'block'})
The lower block element is pushed down. I have tried a few display element options on the lower block with adverse reactions. My last resort will be to set my form as "fixed", but I did want it to simulate a menu title and scroll with that group.
http://www.testinr.com/
You should add the following items to your css
.deliverOnHover
{
position:relative;
z-index: 99;
display: block;
}
body{
position: absolute;
table-layout:fixed;
}
And Jquery will be something like this:
$(document).ready( function () {
$(".deliver").hover(function(){
$(".form_jquery").toggleClass('deliverOnHover');
});
});
and add position:absolute to the css of the div below.