Load HTML Elements Only When Button Is Clicked - javascript

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.

Related

Hide div and show another divs

I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});

Hide div on page but div shows before being hidden

How do I get the <div> not to show at all when the page loads? The div is set to hidden in JS and the <div> hides but its after the <div> has already shown on the page for a brief second.
I am using this popup in my website.
http://mootools.net/forge/p/popupwindow
Here is my code :-
<script type="text/javascript">
App = {};
window.addEvent('domready', function() {
App.popUp1 = new PopUpWindow('', { contentDiv: 'trailerquestion', width: 559 });
App.popUp2 = new PopUpWindow('', { contentDiv: 'popup-redflag', width: 559 });
});
</script>
<?php
function JSLink($text, $onclick) {
return "$text";
}
$asklink=JSLink('<div class="buttonNew greenB bigrounded trailer-button-question"><span>Ask me a question</span></div>', 'App.popUp1.open(); App.popUp1.positionTo(this, 1180, 100);');
?>
<?php
echo $asklink;
?>
<div id="trailerquestion">
<?php
$this->load->view('popup/popupaskmequestion',$results);
?>
</div>
Set the div's display to none with CSS, not Javascript. Then change the display property with Javascript when you want it to be shown.
If you want the div to just be hidden but take up the space it requires, use -
<div id="trailerquestion" style="visibility:hidden">
If you want the div to not take up any space at all and be hidden, use -
<div id="trailerquestion" style="display:none">
Set the element to be hidden with css e.g <div id="trailerquestion" style="display:none">
You might need to set it to display again when you show the dialog if your dialog library doesn't do that for you.

Display the last state of HTML display after clicking back

I have this problem let say I click an event (e.g. radio button 2) to show() div2 and hide() div1. After that I click a link to redirect to the next page.
Then I click back button (browser <-). Radio button 2 is checked, but the display is div1 instead of div2. Here is a sample source code. Could anyone help me if this can be fix.
<!-- test.php START -->
<div id="div_1" style="display: block;">
<p>First Paragraph</p>
</div>
<div id="div_2" style="display: none;">
<p>Second Paragraph</p>
</div>
<div>
<input type="radio" id="rdo1" name="radio" checked/>First
<input type="radio" id="rdo2" name="radio" />Second
</div>
<div>
Just to reload the page or go to other page
</div>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function() {
$("#rdo1").click(function () {
$("#div_1").show();
$("#div_2").hide();
});
$("#rdo2").click(function () {
$("#div_1").hide();
console.log('test');
$("#div_2").show();
});
});
</script>
<!-- test.php END-->
<!-- test1.php START -->
DISPLAY SOMETHING
<!-- test1.php END -->
Web is stateless and by default the browser does not remember any settings of the previous page.. SO when you press the back button it is just like a page refresh like you opened the default page with default HTML
This is the expected and default behaviour
If you want the behavior you are expecting then you need to cache the page or store the state , either in a session or a cookie..
You can on DOMReady check which radio input is selected.
$(document).ready(function() {
var ind = $('input[name=radio]:checked').index();
$('div[id^=div]').hide().eq(ind).show()
$("#rdo1").click(function () {
$("#div_1").show();
$("#div_2").hide();
});
$("#rdo2").click(function () {
$("#div_1").hide();
console.log('test');
$("#div_2").show();
});
})
You would have to save the state somehow, either server-side with ajax or form posts or via client-side with cookie or localStorage.
You can set cookies easily with the jquery-cookie plugin or you can use vanilla javascript to set localStorage like this quick example:
<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>
if ($('#rdo1').attr('checked')){
$("#div_1").show();
$("#div_2").hide();
}
if ($('#rdo2').attr('checked')){
$("#div_1").hide();
$("#div_2").show();
}
$("#rdo1").click(function () {
$("#div_1").show();
$("#div_2").hide();
});
$("#rdo2").click(function () {
$("#div_1").hide();
console.log('test');
$("#div_2").show();
});​

How to show loading gif while iframe is loading up a website?

I have inc/content.php file which contains iframe with src= to my domain.
On my index.php page I have button <button id="nextButton" onClick="viewNext();return false;">New</button> which when clicked calls following JavaScript function:
<script type="text/javascript">
function viewNext()
{
$('#content').load('inc/content.php');
}
</script>
Function loads iframe from inc/content.php file into index.php page <div id="content"></div>
How can I show loading.gif image while inc/content.php file gets loaded into index file?
You can display the loading image before loading the page, and hide it when done (use the second parameter for adding a callback which is called when the request has completed):
$("#loading").show();
$("#content").load("inc/content.php", function () {
$("#loading").hide();
});
Obviously, you need an element in your document with the ID loading, like:
<img id="loading" src="loading.gif" alt="Loading">
<script type="text/javascript">
function viewNext()
{
show_loading()
$('#content').load('inc/content.php' , hide_loading );
}
function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>
While "loading" is the classname of the div that contains loading.gif.
For the loading.gif image, you should put it into a div which can "float" at the center of your page like this :
HTMLCODE:
<div style="position:absolute; top:100px; left:50%;" class="loading">
<img src="/img/loading.gif" />
</div>
You can change the appearing position of the loading image by changing the inline style "top:... ; left:....;". If you want to posiion the loading bases on screen, instead of the page's position, then replace position:absolute; by: position:fixed; (although this won't work with IE)
If you want it to look nice, here is solution i use at job which puts a modal in the screen and a loading gif in the middle.
<script type="text/javascript">
function viewNext()
{
$('#loading').attr( 'src', 'some_path/loading.gif' );
$('#container').block( { message: $( '#loading' ) } );
$('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>
it uses jquery.blockUI.js which allows me to block certain container, may be a div or the whole screen.
The html you need is this
<img id="loading" style="display: none;" src="" />

How to show divs on browser scroll

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>

Categories

Resources