how do i resize the height of the modalbox after loading content via ajax. I am trying to use the resizeToContent() function the following way but its not working.
Content
<script type="text/javascript">
Event.observe('link111', 'click', function(event) { new Ajax.Updater('update','/content', {asynchronous:true, evalScripts:true, onComplete:function(request, json) {Modalbox.resizeToContent(); Element.hide('indicator');}, onLoading:function(request) {Element.show('indicator');}, requestHeaders:['X-Update', 'update']}) }, false);
Your code above looks correct. You are doing the right thing which is to call:
Modalbox.resizeToContent()
in the onComplete callback. Bear in mind, though it looks like you are aware, that the resize (according to Modalbox docs anyway) only resizes the height, not the width.
If the above is not working, I suggest you install something like Firebug within Firefox, and see if there's not perhaps some other issue with your Javascript preventing the resize to be called correctly.
Related
I'm trying to make a feature where users type into a text box which produces suggestions as you type (like Google Instant), then those suggestions can be dragged into boxes on the page. It all worked fine until I discovered touch screen mobile devices don't work with HTML 5 drop and drag. I'm trying to get it work with jquery instead but it's not going smoothly.
The code below displays a draggable image and it works with touch screens and mice.
<script type='text/javascript' src='js/head.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
$('#touchme1').draggable({revert:true});
$('#drop').droppable({
drop: function( event, ui ) {
$(ui.draggable).remove();
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#faa'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
}
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>
The problem is that when the same code is used within the php file which is called to display search results, the drag and drop doesn't work on mobile devices (but it does on desktops).
I have a feeling you may need to attach an event handler to the #touch1 element. The code you posted only looks for #touch1 elements that already exist in the DOM, but as your element is loaded though AJAX, it will not be in the DOM when the page first loads.
You can use .on() to attach an event handler to the object.
$(document).on('mouseover', '#touchme1', function(){
$(this).draggable({revert:true});
});
In the above example I am using the mouseover event. However you will need to choose an event hander that will work for you with both touch devices and with a mouse.
Example jsbin: http://jsbin.com/agisom/2/edit
I am using two jquery plugins:
hero carousel and content hover.
Initially when I load the page the content hover works correctly, however when I carry out a hard refresh on the page it seems to default to display:none.
I have tried disabling the hero carousel plugin and this resolves the problem but I have no idea where the conflict may be between the two plugins.
I would paste all the code but that would mean pasting two huge chunks of jquery, the site in its current state can be found here the content hover plugin is currently on the bottom left image under the slider.
Thanks.
Take these two scripts:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
<script>
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
</script>
And put them together like this:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
});
</script>
I do not see any script binding your second carousel function. I also do not see the easing library which is available here: http://gsgd.co.uk/sandbox/jquery/easing/ You'll need that because you are using easing in your carousel function above.
I have seen that an animated loading gif loads when a an ajax request is being processed. I was wondering how this was done.
For example, there are a lot of images that are loaded from css file. Can I make a loading gif appear until these images are loaded.
Do you mean smth. like this:
http://api.jquery.com/ajaxStart/
or this: How to show loading spinner in jQuery?
You don't really mean Ajax. The images declared in css are loaded by the browser normally.
You need the load event, try this:
1 - Create an element with id yourDivIdWithLoadingElement in your html page which will be shown until all images has been loaded
<div id="yourDivIdWithLoadingElement:>Loading content...</div>
2 - Add this script in your header:
$(window).load(function () {
$('#yourDivIdWithLoadingElement').hide();
});
I dont know if you are using ASP.NET MVC?
If that is the case you can use an #Ajax.ActionLink and put your loading gif in an img tag specifying the id in your actionlink's AjaxOptions in the LoadingElementId.
It would look somehow like this
#Ajax.ActionLink("MyAction", "MyController", new AjaxOptions(){LoadingElementId = "MyGif"})
It will then hide the img gif until the actionlink is triggered. Sometimes you will need to hide it yourself using css, but as far as I remember that is not the case when you are just using an img tag
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>
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!