i use dialog box without dialog ui for show erorr event in web page
<div id="downloadcredit" style="width:100%;position:fixed;height:100%;min-height:overflow:hidden;background-color:rgba(127,127,127,0.4);display:none;" >
<div style="text-align:right;width:466px;position:absolute;left:0;right:0;height:337px;min-height:overflow:hidden;background:url(images/creditbase.png);color:black;margin-left:auto;margin-right:auto;top:200px;font:16px behzad;">
<div style="width:100%;height:40px;background:transparent;font:20px behzad;padding-top:8px;color:#818181;text-align:center;"><span style="float:right;font:12px tahoma;font-weight:bold;color:#75797A;margin-right:15px;cursor:pointer;margin-top:6px;" onclick="$('#downloadcredit').slideUp('slow');">X</span></div>
<div style="margin:175px auto 10px;width:95%;font:11px tahoma;text-align:center;color:white;line-height:165%;">
<p> Erorr Sample ...
</div>
</div>
</div>
<body onload="$('#downloadcredit').slideDown('1000');">
but my page is Slow loading and 3 or 4 second after page complete loaded dialog show :( .
any way for show dialog first and page load in background?
I usualy apply the style "display:none" to the target container, then you can use the .load() function and use the callback to show your container filled with data.
Basically :
$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
$('#target').removeClass("loading-layer");
$('#target').show();
});
Related
I am using emojiareaone from this link Emojiareaone,Its working fine on button click function,but on document ready i need to show the emoji with wrapper open and all the images inside the wrapper.Kindly suggest me
// I am using standalone
$("#standalone").emojioneArea({
standalone: true,
autocomplete: false
});
</div>
<div class="span6">
<div id="standalone" data-emoji-placeholder=":smiley">
</div>
You could try triggering the click event on the buttons, so it calls the code that loads the emojis instead of just showing the container.
$(".emojionearea-button").Click();
A simple search on Google for popup scripts brings out thousands of results for popup plugins.. But I believe something this simple shouldnt need a plugin.
I want a simple popup script with no overlay that does basically 3 things:
Opens on the click of a button
Closes on the click of a cross
Is centered on the screen and is fixed
<div class="member-pop" id="member-pop1">
<a class="member-close1 cross"><img src="img/pop/pop-cross.png"
alt="Close" /></a> <! -- This will close Popup -->
<p>Content inside popup</p>
</div>
What I have done so far
$('.pop-member1').click(function() {
$('#member-pop1').show();
});
$('.cross').click(function() {
$(this).parent().hide();
});
This achieves 1 and 2. Number 3 still not achieved yet
$( "#member-pop1" ).dialog();
<div id="member-pop1" title="My dialog">
<p>This is where you show the content. Click on cross to close me!</p>
</div>
Makes use of jquery ui dialog.
I have this situation that i need to trigger click on some element from clicking other element. More concretly - i have gallery with thumbnails. When you hover over the thumbnail - the description box covers the whole thumbnail. After that i need to trigger click event on the thumbnail so it can run lightbox. To achieve this i need to do something when i click on the description.
This is the html:
<div id="gallery">
<!-- Content from handlebars that is loaded dynamicaly from template file via ajax -->
<a class="lightbox lightbox-frame" href="img/gallery/{{filename}}.jpg" data-lightbox="gallery" data-category="{{category}}">
<img src="img/gallery/thumbs/{{filename}}.jpg" alt=""/>
</a>
<p class="gallery-image-description">{{description}}</p>
<!-- Content from handlebars -->
</div>
I am trying this but it does not work. It works for statick content but this content is loaded via Ajax and then compiled with Handlebars:
('#gallery').on('click', '.gallery-image-description', function () {
$(this).prev().click();
});
So the question is: Do you have any idea how i can trigger click event on dynamicaly generated content, by clicking on other element ?
I'm not sure this will help because I've never used lightbox, and I can't be sure that there isn't an interaction between lightbox and the JS.
But here is a FIDDLE that
Has a dynamically generated div/image
On hover, covers the image with text
A click on the parent pops up an alert
JS
$('.imagestuff').on('click', function(){
alert('clicked');
});
I am using following page to redirect the next page when success current page.
How to show the pop up when load the new page and click the ok pbutton it will move to next page.
How to achieve this?
<script type="text/javascript">
$(document).ready(function () { //or $(window).load(function(){
$('#myModal').reveal($(this).data());
});
</script>
<div id="myModal" class="reveal-modal">
<h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<inputbutton name=ok value="www.mpage.com" />
</div>
Don't pass anything into the reveal method. Reveal method for Zurb Reveal (which it looks like that's what you're using) accepts only options specified here: http://zurb.com/playground/reveal-modal-plugin
$('#myModal').reveal();
Assuming that you have your myModal on your page and you're loading the reveal plugin before your script there, it should work.
I am using jQuery UI Tabs with Ajax. We have content in the tabs that display loading animations when a tab is loaded before the content is.
However, when the page is loaded, you can see the content below the unrendered tabs before they have been jQuerified.
My question is, is there a way to hide these tabs content before they have been rendered into tabs and show the content after? Adding visibility: hidden or display: none causes the content to not show up.
<div id="ui-tabs-1" style="display: none;">
<!-- Default Content -->
</div>
<div id="ui-tabs-2" style="display: none;">
<!-- Default Content -->
</div>
You can use display:none on the tab contents that you don't want to see before rendering the tabs and show them all in the create call back function.
See my DEMO here.
Added class tab_content to those tabs that will be display:none
Added code $('.tabs_content').show(); On tab->create call back