jquery plugin conflict - display none becomes the default option on hard refresh but not by default - jquery-plugins

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.

Related

How can I make the kendo ui grid filter editors work in a jquery ui dialog

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.

Mootools 'Uncaught TypeError: Property 'container' of object #<Object> is not a function' error when accordion added

I'm working with a site developed by an external developer. I've noticed the code they use for accordions only supports a fixed number of accordion items per page (even though their CMS can create an unlimited amount of items marked as being displayed accordion-style). I'm trying to tidy this up to avoid confusing my colleagues later down the line.
I'm trying to add a standard Mootools more accordion, but when I add it to a page I get the error below:
Uncaught TypeError: Property 'container' of object # is not a
function mootools-core-1.4.5-full-compat.js:683
Here's an example page - the links in tags below 'Session details - Click the titles below for more information on each session.' should all be accordions.
I'm calling this code at the bottom of my page from http://www.aua.ac.uk/scripts/accordion.js:
window.addEvent('domready', function(){
new Fx.Accordion($$('#sub_left .accordion_heading'),$$('#sub_left .accordion_holder'), {
opacity: 0,
display: -1,
alwaysHide: true
});
});
Using these versions of Mootools (referenced at the top of the page in the head):
mootools-core-1.4.5-full-compat.js and mootools-more-1.4.0.1.js
Here is a fiddle using those verions of mootools, a portion of the HTML from my page, and the same accordion code - and it's all working. I think there is a conflict somewhere on my full page but I can't work out where.
http://jsfiddle.net/bcfu2/5/
Does anyone have any idea how to either fix this, or where to start debugging it - other than removing code/links to JS files one by one?
The js of microsoft creating some collision with mootools Array implements:
<script src="/WebResource.axd?d=maKRZUGfDX1oNLvbjE5CVpp8Freqy1QYQvNjdATWoN2tEAP8BRYB9DDy6RYI9PQwhPak11VYG6N-fakPxQX9OdjCS0k1&t=634604425351482412" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=WSd7pLxkPBvO2m8zwahAn--zWk9drBpRcPo6hiP5S6h3lc4U02xAjGNhWI80hxb4tjqMmAYSYPB7ziM6k7g74E-bBOiz7xRre8hSbGF4tJ2E6c8VeX-W4J-tQv1ZL10ruL5uPffOFyiUX3xZVWWQT_YClyI1&t=ffffffffb868b5f4" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=bawOzJp1LF5Sj6rS_r-W75i2ouoWmFBvTNI9zqR0q_Lsf42KbPAaMTrPFSZ9jqam3zDWOHBUgNgKBDwGos_WSLyBOzTAzYVuGRRlgWxM0Jm-uc_fb8NPaprYxmDuvgVoemZKvN0bfNIpr2yzsXUjhCVB-0dFOF6qHbKXJEXRN_LWShmr0&t=ffffffffb868b5f4" type="text/javascript"></script>
If you remove those scripts you will see your code is working fine:
http://jsfiddle.net/V8WRM/

Drag-and-drop Javascript won't work within ajax request on mobile devices

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

Prototype modalbox resizeToContent

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.

Open a hidden div in a lightbox with Mootools in Joomla 1.5

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.

Resources