I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>
Related
It appears there is a conflict between kendo 2013.2.716 and jquery ui 1.10.3. If I have a kendo grid inside a jquery ui dialog I cannot place the cursor in the textbox inside the filter editor. I've created a jsBin to demo the problem.
http://jsbin.com/itehom/14/edit
Repo steps
click "pull the grid into a dialog"
click the filter icon on any column
try to place your mouse in the text field inside the filter editor.
Set modal: false for jQuery dialog.
Try following
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
If you used the jquery dialog instead of the Bootstrap modal, Varde's script might not fix your problem. I spent a few hours on this. Then I noticed the following line can be added after opening your jquery dialog, and it fixed the problem.
$(document).off('focusin');
As you may have noticed, the event doesn't contain a namespace. Keep in mind that this might turn off more "focusin" event handlers that you wish to turn off. I checked the jquery UI source code and didn't find the namespace and am unsure if they used a namespace.
The entire code block of my prototype is like:
<button id="opener">Open Dialog</button>
<div class="row" id="viewSearchResults">
blah, blah, ...
</div>
<script>
$(function () {
$("#viewSearchResults").dialog({
autoOpen: false,
modal: true,
minWidth: 700
});
$("#opener").click(function () {
$("#viewSearchResults").dialog("open");
$(document).off('focusin');
});
});
</script>
Hope the above can save some time for some developers. Thanks.
I'm trying to put a scroll up (back to top) button in my blogger blog.
That should be, in principle, quite simple, but I don't why I can't manage to do it. Now after trying so many things I'm totally frustrated.
I'm using the following html code:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#"><img src="url address of image" /></a>
The button is there as expected, but when I click on it, it reloads the blog instead of going to the top. Why?? no clue.
I tried to use an "id" in the logo image and link to it, and I've also tried to use in the blog head a name tag "name=Top" and link it with href="#Top".But it doesn't matter. It always reload the blog instead of going to the top.
For instance, when I'm inside a post and I click on the button it goes to the main page instead of scrolling up within the post.
If you want to check it yourself, please do it. My blog is cortarcoserycrear.blogspot.com
Whatever help you can provide me it would be very appreciated because I don't know what's happening.
Thanks.
You should be using Javascript/JQuery to do this.
Refer to this question: How to scroll to top of page with JavaScript/jQuery?
What I finally used to solve my problem was:
Button html:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" class='go-to-top' title="Back to top"><img src="image url" /></a>
Body html:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script>
$(function () {
$('.go-to-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)
I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla's built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on the page.
HTML:
<div id="moduleBox">
<div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
<div id="hiddenForm">
form code goes here
</div>
</div>
Javascript:
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('hiddenForm').setStyle('display','block');
});
});
So how do I get the form to only show up in the modal box?
You can see what I am talking about here - http://www.internextion.com/
It's the Call Back Module. I already added the handler: 'adopt' as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.
I think this uses Harald's SqueezeBox - in which case, you are looking at the following scenarios:
find the target div and CLONE it to insert into the modal box.
find the target div and ADOPT it into the modal box.
you are seeing the first (default) case. to achieve the second effect, add:
handler: 'adopt'
to the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/
Option 1:
If you look at the html code (in firebug) for the overlay div you will see that it makes a "copy" of html and places inside the overlay container with id="sbox-content". In theory if you add a CSS like below +/-, it will hide the link and display everything else. This might be the simplest and easiest solution.
div#sbox-content > a#formClick{
display: none;
}
Option 2:
If option 1 does not work for some reason, you can try playing with CSS and hide the link when the Modal box opens and then making it visible when it closes.
Modify the JS to add a class instead of modifying the style.
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('formClick').addClass('hidden');
$('hiddenForm').setStyle('display','block');
});
});
Load additional CSS that will make the link invisible
div#clickMeButton.hidden {
display: none;
}
Then you will have to overload closing event and make the link visible...
Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.
I knew it was something simple, thanks for the help!
BTW - the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.
I thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!