How to show divs on browser scroll - javascript

My page layout has several group of divs repeating like
<div--1>
<div--2>
<div--3>
<div--4>
Tthis structure repeats over several times. I would like to hide the contents of div--4 to be hidden untill the user scrolls to that element. How can we achieve that functionality?
I found a plugin that works with images like that(http://www.appelsiini.net/projects/lazyload)

This code will show and hide the divs based on the mouse position. Not sure how to detect a particular div is on the screen currently or not.
<html>
<head>
<title>Show/Hide Divs</title>
<script type="text/javascript">
function showMyContents(control)
{
control.children["myContents"].style.display = 'inline';
}
function hideMyContents(control)
{
control.children["myContents"].style.display = 'none';
}
</script>
</head>
<body>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 1
<div style="display:none" id="myContents">My Contents1</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 2
<div style="display:none" id="myContents">My Contents2</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 3
<div style="display:none" id="myContents">My Contents3</div>
</div>
</body>
</html>

Related

Load HTML Elements Only When Button Is Clicked

I have this code and since it will contain many images, I wanted to prevent these images from loading when the page loads to decrease page loading time. My idea was to prevent this code from running unless the user asks to do so by clicking a button. Thus loading the images only when the user wants to see them.
<div style="margin-top:40px;">
<h3><a href='{parse url="showuser={$member['member_id']}&tab=jawards" seotitle="{$member['members_seo_name']}" template="showuser" base="public"}'>{$this->lang->words['awards_title_post']}</a></h3>
<div class="row2" style="padding:7px;">
<foreach loop="profileawards:$awards as $a">
<img class="tooltip" src='{$this->settings['upload_url']}/jawards/{$a['icon']}'
<if test="size:|:$a['width']">
width='{$a['width']}' height='{$a['height']}'
</if>
<if test="toolTip:|:$a['toolTip']">
title='{$a['toolTip']}'
</if>
/>
<if test="awardCount:|:$a['count'] > 1">
<span class='JLogicaAwardsCount'>{$a['count']}</span>
</if>
{$a['hook']['settings']['padding']}
</foreach>
</div>
</div>
You can try following js
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><<<< this goes in the header
</script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".hiddendiv").slideToggle();
});
});
</script>
</head>
<body>
<input type="button" class="button" >123</button>
<div class="hiddendiv">
your data to show
</div>
</div>
</body>
<style>
.hiddendiv {
display:none;
}
</style>
Whatever data that you want to show only when user clicks the button, collect it in a javascript variable.
var myHeavHtml = ""; \\all data with images.
Say there is button on the page id btnLoadImages
var isImagesLoaded = false;
$('#btnLoadImage').on('click', function(e)
{
if(!isImagesLoaded)
{
$('#imgContainer').html(myHeavyHtml);
isImagesLoaded = true;
}
else
{
$('#imgContainer').toggle();
}
});
On the page load, declare a variable isImagesLoaded set to false, means you have not loaded the images. So when it is false, add the html to container div.All other times, just toggle the hide & show.
In this way, the images will not be loaded when the page is loading, it will inserted only when you click the button.
Hope this suffice your requirements.

Click an Image to Reveal Content

I have searched an searched for answer to this question but can't seem to find an answer that works for me. What I'm wanting is an image that presents itself on the page as with a normal tag. I want the image to be clickable, and when it is clicked, some content will drop down below it for a description of the image, etc. Then, when the image is clicked again, it will hide the content.
My (beginner) javascript attempt looks like this:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
$(window).load(function(){
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
The HTML is this:
<div class="container">
<div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div>
<div class="content" style="display: none;">
The words should be here.
</div>
Any help would be appreciated, and I apologize if this has been answered elsewhere. I couldn't find it.
You need a separate script tag for your code. You can't reuse the one that's importing jQuery.
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
// Your code
</script>
Try this html:
<div class="container">
<div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div>
<div class="content" style="height: 0px;overflow:hidden;">
The words should be here.
</div>
And this script:
$(document).ready(function(){
$(".header").click(function () {
if($(".content").height() === 0){
$(".content").animate({height: "20px"}, 500);
}else{
$(".content").animate({height: "0px"}, 500);
}
});
})
On jsfiddle: https://jsfiddle.net/wef1o0b5/

Multiple navigations and pages on a single page

<html>
<head>
<style type='text/css'>
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
</style>
<script>
// show the given page, hide the rest
function show(elementID) {
// try to find the requested page and alert if it's not found
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
// get all pages, loop through them and hide them
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// then show the requested page
ele.style.display = 'block';
}
</script>
<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>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div style="float: left; width: 20%;">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
<button>Link 1</button>
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
<button>Link 2</button>
</p>
</div>
</div>
</div>
<div style="float: right; width: 75%;">
<div>
<p>
Show page
<span onclick="show('Page1');">1</span>,
<span onclick="show('Page2');">2</span>,
<span onclick="show('Page3');">3</span>.
</p>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
</div>
</div>
</body>
</html>
Above is the code that I have so far.
Right now, when clicking on page 1, page 2, or page 3, the desire page will appear below. This code is set up on the right side of the page. <div style="float: right; width: 75%;">
On the left side of the page <div style="float: left; width: 20%;">, i have an accordion with a couple button links. My question is when clicking on button link 1 or button link 2 in the accordion, how can I switch the right page from a selection of different pages keeping the same function it has right now.
Thus, first i would click on button link 1 in the accordion to show desired page on the right side and if i would like to switch pages, then i would click on button link 2 in the accordion and show that desired page.
For visual, please see this fiddle
If you saw the fiddle, then the links inside of the black box switch pages within the div, but I would like to add another function and switch the black boxes depending if the user presses button link 1 or button link 2
Any suggestions? thanks!
I am not certain that I understand the question correctly.
What I believe could be very useful for you, is to look into jQuery UI Tabs:
http://jqueryui.com/tabs/
and link the tab click events to the accordion menu.
Edit:
JSFiddle, including the jQuery UI tabs.
Provided the code on how you can activate the tabs on a click event from the accordion menu.
http://jsfiddle.net/kimgysen/BcCnL/2/
$(document).ready(function() {
//Tabs
$('#body_div').tabs();
$('#newsfeed').click(function(){
$("#body_div").tabs("option", "active", 0);
});
$('#myprofile_edit').click(function(){
$("#body_div").tabs("option", "active", 1);
});
$('#myprofile_view').click(function(){
$("#body_div").tabs("option", "active", 2);
});
});

Javascript Loop for show/hide DIVs

I have 6 DIVs that show and hide, triggered by an onClick event. Currently if you click the 6 different pictures that trigger these divs, they all show up on top of eachother.
I would like only one DIV to show up at a time. So when you click a different image, it hides the currently displayed div and shows the new one.
I am guessing I need to loop through these somehow, can anyone point me in the right direction? My code:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function () {
$(".slidingDiv2").slideToggle();
});
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function () {
$(".slidingDiv3").slideToggle();
});
$(".slidingDiv4").hide();
$(".show_hide4").show();
$('.show_hide4').click(function () {
$(".slidingDiv4").slideToggle();
});
$(".slidingDiv5").hide();
$(".show_hide5").show();
$('.show_hide5').click(function () {
$(".slidingDiv5").slideToggle();
});
$(".slidingDiv6").hide();
$(".show_hide6").show();
$('.show_hide6').click(function () {
$(".slidingDiv6").slideToggle();
});
});
</script>
Not completely sure if this is what you're going for, but something like this might work:
HTML:
<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->
<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->
JQuery:
$("img").click(function () {
$("div").slideUp(190); // hide divs previously shown
var divSelect = $(this).attr('class'); // get class of div to show
$("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});
WORKING EXAMPLE
I am still working on simplifying it, but it works. You will have to repeat it to every div, giving different selector names. When I figure a loop out, I will let you know.
Good luck!
<!--HTML starts-->
<div class="med-wrap-video">
<div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
<br>
Read More</p>
<br>
<span class="selector1">
<p class="body-text">
Title: <br>
Composer: <br>
Year: <br>
</p>
</span>
</div>
</div>
<!--JS begins-->
$(document).ready(function(){
$(".selector1").hide();
$(".a selector").click(function(event){
event.preventDefault(); //prevents page to reload
$(".selector1").slideToggle(600);
$(this).toggleClass(".selector1");
});

javascript code to make a div slide down and up (show/hide)

I have a page and I have little question mark images next to sections where if the question mark image is clicked, a div right below the section will appear sliding the rest of the page down. Essentially a slide down/slide up javascript function.
Ex:
Section Title (? IMG)
<div id="section">blah blah blah</div>
<br><br>
Section Title 2 (? IMG)
<div id="section2">Blah2 blah2 blah2</div>
In my example above, the content inside div section and div section2 is hidden at first, but when the ? IMG is clicked for that section, the content will reveal itself and the rest of the page will slide down at the same time to make room for the content inside the divs. And on reverse, if the question mark image is clicked while content is shown, it will slide up and hide itself and the page below will slide up as well filling the gap.
How would I write this? I need it expandable so I can add multiple div's which can be titled accordingly and expanded individually.
Thanks
With jQuery you can do this:
HTML:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
Script:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
Source: jQuery docs http://api.jquery.com/slideDown/
To include jQuery on a HTML page, you can use the following in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You could also download it yourself at place it on the server you want.
EDIT: Full answer with ready code then....
HTML:
<h1 id="id1" class="clickme">click1</h1>
<div id="section1">blah blah blah</div>
<br><br>
<h1 id="id2" class="clickme">click2</h1>
<div id="section2">Blah2 blah2 blah2</div>
SCRIPT
$('.clickme').click(function() {
$(this).next().slideToggle('slow', function() {
// Animation complete.
});
});
Try this for instance:-
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">blah blah blah</div>
</div>
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">Blah2 blah2 blah2</div>
</div>
<script>
$(function(){
$('.btn').click(function(e){
$(this).parent().toggleClass('slideOut');
});
});
</script>
.section{
display:none;
}
.slideOut .section{
display:block;
}
.btn
{
cursor:pointer;
}

Categories

Resources