I want to have a javascript overlay box load on startup inviting users to participate in a feedback survey. How can I do this. I do not want a separate window.
Christopher,
It sounds like you want a non-intrusive "pop-up" dialog, but for it just to overlay the main page and not show up in a separate browser window. "jQuery UI" has lots of built-in goodies like this. A simple example of the code may look like this:
<script src="jquery.js" />
<script src="jquery-ui.js" />
<script type="text/javascript">
$(window).load(function () {
$("#overlay_box").dialog();
});
</script>
...
<div id="overlay_box">
<!-- your HTML content here -->
</div>
For a live demo of the code above, as well as more details, visit:
http://jqueryui.com/demos/dialog/
Hope that helps.
-tjw
You would want to use a div that you can show when the form is finished loading or some other event occurs. Here are a couple examples sample1, sample2
You could add function to window.onload thats shows you overlay when the page is loaded
also are you using any framework alot of them have functionality like that.
Related
So the bottom part of my homepage source code looks like this (simplified):
</body>
</noscript>
<div>
<script type="text/javascript">
// ads code goes here
</script>
</div>
</html>
Detailed code here
I've tried using jQuery to add a <noscript> tag before the mentioned <div> after the document loads, but it didn't work.
Is there a way I can spare my visitors the trouble of dealing with that popup (other than switching host)?
Yes, insert this before their script runs:
<script>
window.stop();
</script>
This will prevent dom onload handlers from being called, though. Among other things.
The script from popcash.net creates a function called jsPopunder. You could try overwriting it with:
window.jsPopunder = undefined;
I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>
I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.
The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support
When I'm using mmenu jquery plugin, it doubles all js events and script call, except scripts in head section. What would be the possible solution for this? Any help would be greatly appreciated.
Sorry, but I can't show you full code, it's on working site. Mmenu starts that way in body section:
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu();
$("#my-menu").find( ".mm-subopen" ).addClass( "mm-fullsubopen" );
});
</script>
i tried mmenu in my production app and at first it gave me some headaches, but understanding how it works helped me to use it correctly.
Wrap your whole layout in a div without styles (so the website's style remains the same).
Place your menu markup outside your layout (inmediately bellow the body tag).
Add the the plugin at the end of your markup along with the initialization code.
Don't manipulate the inner content of the menu to do actions. Use it's API instead.
After you follow these tips, you should have a structure like this:
<html>
<head> ... </head>
<body>
<nav id="mymenu"> ... </nav>
<div> <!-- whole website in here --> </div>
<script src="js/mmenu.min.js"></script>
<script>
$(document).ready(function() {
var mmenu = $("#mymenu").mmenu();
// do not use code bellow, use the API instead.
// $("#my-menu").find( ".mm-subopen" ).addClass( "mm-fullsubopen" );
var api = mmenu.API(); // exposes methods to open() and close() the menu
});
</script>
</body>
</html>
Hope these setup works for you. It worked for me perfectly in my Meteor app.
I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});
I am currently designing a website where I am using the jQuery ScrollTo plug-in, which uses the jQuery 1.6.2 library. As part of the website, I am required to create an Ajax contact form (I need to make sure it does not take the user to another page, as it's a vertically scrolling site in which all content is on one page). The only jQuery Ajax form I could find uses jQuery 1.3.2. I've done a little bit of reading around about the noConflict() mode, but being a bit of a beginner in Java/PHP, I'm really not sure of how to use it.
My current <head> code is as follows:
<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="form/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="form/js/js.js"></script>
The first two lines are calling on the two jQuery libraries, and the second ones are the specific codes for the scroll and the form.
I'm really unclear of how to use noConflict with these codes, can someone please help me? I know this question has been asked a lot of times before, but I'm just confused by it!
Please note that I call on my libraries within the page, but no JS is actually written WITHIN the homepage document, it's all in other files, eg: form/js/js.js.
Thanks a lot to anyone that can help me, very much appreciated.
try this:
var jq = jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jq );
I has solved my similar problem by using the below code.
HTML Code:
<div class="mycssclass">
<h2 >FAQs</h2>
<p >01. This is my first Question?
</p>
</div>
----
----
<p><a name="01Answer"></a>
<br>This is my Answer.</p>
JQuery Code:
customfaq: function(){
$('.mycssclass p:eq(1)').click(function(){
var p = $(".mycssclass p:eq(1)");
var position = p.position();
$(document).scrollTo( {top:position.top,left:position.left}, 800 ); });}
For more details, Please look into http://api.jquery.com/scrollTop/
and http://api.jquery.com/category/offset/