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.
Related
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');
});
I have this:
<div class="sub-slider" style="display: none;">
<section class="subscriptions_slider container-fluid">
<?php echo do_shortcode("[subscriptions_slider]"); ?>
</section>
</div>
And using Jquery like this:
$('.change-sub').on('click', function() {
$('.sub-slider').toggle();
});
If I load the page now and click on change-sub button. The content that is toggle is squished. But if I load the page without style="display: none;" then it shows normally. Why is this?
This is because display: none property will remove the element from the DOM,
If you dont want the element to get removed from DOM rather use VISIBILITY:HIDDEN, It will reserve the space for the container.
Something like below.
<div class="sub-slider" style="visibility: hidden;">
<section class="subscriptions_slider container-fluid">
<?php echo do_shortcode("[subscriptions_slider]"); ?>
</section>
</div>
and
$('.change-sub').on('click', function() {
var visibilityProp = $('.sub-slider').attr('visibility');
if(visibilityProp == 'hidden')
{
$('.sub-slider').attr('visibility','visible')
}
else
{
$('.sub-slider').attr('visibility','hidden');
}
});
please mark it as answer if it is as per your need.
In html page am having an div-reportControlPanel as below . I have included another div-reportControlPanel1 as same with different id .
<div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
Here Am show/hide the div's based on url am triggering .
if(prptName == "css.prpt")
{
alert("if");
document.getElementById("reportControlPanel").style.display = 'none';
document.getElementById("reportControlPanel1").style.display = 'block';
}
But as am using same sub Div-promptPanel under two different div my content is not loading properly . promptPanel is pentaho system used div. I am trying to have an another div to modify some css for my prpt.
Thanks.
To reiterate what Moishe said to you already: id are meant to be unique. You currently have two promptPanel id's, which means the second one will likely never be called. Now, you could use javascript, but with minimal knowledge of what your code looks like you could use a simple hash url + some basic css.
$(document).ready(function() {
$('a').click(function() {
$('#url').html($(this).prop('href'));
});
});
div.pentaho-rounded-panel-bottom-lr {
display: none;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
display: block;
}
:target {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"></div>
"Open" panel 1
"Open" panel 2
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the first control panel.
</div>
</div>
<div id="reportControlPanel2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the second control panel
</div>
</div>
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.
Hidden form element shown when page load. i tried using this code but that hides after the pages load too
here is my html/PHP code
<div id="i1" class="hidden1" style="position:relative; overflow:hidden;">
<?php
$record = mysqli_query($con,"SELECT DISTINCT Tread_Design FROM db WHERE Tread_Design='HF3' or Tread_Design='HF4' or Tread_Design='HF2' or Tread_Design='I3' or Tread_Design='HF3' or Tread_Design='HF4' or Tread_Design='HF2' or Tread_Design='I3' or Tread_Design='I1' or Tread_Design='R3'");
while ($row = mysqli_fetch_array($record))
{
echo "<input type='checkbox' name='".$row['Tread_Design']."' value='".$row['Tread_Design']."'>"." "
.$row['Tread_Design']." ";
}
?>
Here is the page
<script type="text/javascript">
$(function() {
$('#i1').hide();
$('#mylist').change(function () {
if ($('#mylist').val() == "TURF") {
$('#i1').show();
$('#i1').show();
} else {
$('#i1').hide();
$('#i1').hide();
}
});
});
I USE THE CODE BELOW IT HIDES AFTER THE PAGE LOADS TOO
div.hidden
{
display: none
}
$(document).ready(function() {
$("div#extraControls").removeClass("hidden");
});
you should put the CSS at first in head ... so they will load first
then the html ... so the browser will not show the hidden forms
then the JS ... at the footer so it will load last and remove the classes
btw in your CSS to are point to wrong class name . it should be hidden1
div.hidden1
{
display: none
}
//change your css
div#extraControls
{
display: none;
}
You are referring the wrong class name.
The hiding property is set to class hidden and you have applied class hidden1.
It should be:
<div id="i1" class="hidden" style="position:relative; overflow:hidden;">
<!-- Observe the class name, you have given display:none property to class hidden not hidden1-->
Basically, you need to hide some of the elements at page load.
Later they can be shown.
So, use display:none property.
This will load elements on page load but hide them.
This is very simple and no javascript/jQuery needed.
Your container's using hidden1 instead of hidden as defined in your css. change either the class of the container or the class name in the style.