Develop Reference

jQuery .attr() not working with WordPress theme

I have a WordPress site located at http://test.bcminiwarehouses.com
I am trying to add 2 attributes to the Make a Payment link in the menu so that it functions like clicking on the + on the top right.
When I inspect the element in Chrome and manually add the attributes, the link works as desired. However the jquery command appears not to be functioning to automatically add these attributes.
The code that can be viewed in the source code is:
$(".menu-item-6654").attr('data-target', '.x-widgetbar');
$(".menu-item-6654").attr('data-toggle', 'collapse');

Maybe there's a conflict between jQuery and Wordpress,try to do:
jQuery(document).ready(function($) {
$(".menu-item-6654").attr('data-target', '.x-widgetbar');
$(".menu-item-6654").attr('data-toggle', 'collapse');
});

put your code in
$(function() {
});

resizable jQuery UI doen't work

I wonder why my resizable() jQuery UI function doesn't work on my img.
http://impress-builder.herokuapp.com/home
here is the code: https://github.com/lipenco/impress.js-app
function setResizable(){
$( ".resizable" ).resizable();
}
$(document).on('click', 'img', function(event){
$(this).addClass('resizable');
$(this).css("position" ,"absolute")
setResizable();
return false;
});

Are you sure that you can resize an image directly ? I suggest wrapping it in a div.
http://jsfiddle.net/8VY52/
You can create a div on the fly. Ho, also, you must set the div style="display:inline-block"

I cannot be able to find error in it. but if you can provide me the exact reference as to where is the exact code written on to the page as I cannot be able to explore code on the webpage you referenced. Please elaborate more for help.
Example : $(document).find('.resizable').resizable();
Or directly on to the page through browser Console.
Here's a jsfiddle code with static element : http://jsfiddle.net/coolshivster/eUKhA/
Try Resolving it by placing your jQuery-ui file on to the head or before img.js

Execute jQuery Popup When Page Loads?

I'm using the Reveal modal plugin by Zurb.
http://www.zurb.com/playground/reveal-modal-plugin
Does anybody know how I can get the modal to execute (as in open the popup box) when my page has finished loading as opposed to when the handler is clicked?
I'd like to use it to display a simple message each time somebody opens my homepage.
I've dug through the code and tried a few things, but I'm a self confessed jQuery noob.
I was going to post the entire contents of the jQuery plugin itself, but it might just be easier to download it and take a look for yourself.
Thanks!
:)

$(function() {
$('#myModal').reveal();
});
OR
$(document).ready(function() {
$('#myModal').reveal();
});

Couldn't you just do the following after you instantiate your modal:
$(document).ready(function() {
// instantiate modal first
$('#myModal').reveal();
});

Something like this should work:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').reveal();
});
</script>

Hey had trouble getting this to work on a page using other .js libraries where JQuery NoConflict was being used -- in that case try this:
jQuery(document).ready(function($) {
$('#myModal').reveal();
});

jQuery slow reveal on page load

I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?

First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});

$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.

I want to have a overlay using css but it's not working

I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT

why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});

You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.

I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/