Develop Reference

Toggle menu with Jquery not working

I want to make a toggle menu with jquery in this page: http://propertymanagementoh.com/new-short-header-page/ .There is a menu in the right top. I want to make it toggle when someone will click on the "Menu ☰" button then the menu will appear and again when click on the button then that will disappear(like this: http://www.titleonemanagement.com/ ). I have written the following code but it is not working:
<script>
$(document).ready(function(){
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
});
</script>
Also used the following css:
#block-38 .menu{
position:fixed;
top:0;
right:0;
width:250px;
overflow:hidden;
z-index:999999;
}

There were two jquery scripts being used, meaning that the jQuery.noConflict(true) was causing an issue with the second set of jquery instructions.
Advised user to combine scripts and it worked!
:)
Additional help as per comment:
A few things need to be done to assist with this.
1) In your css add this:
#block38 .nav-vertical.active {
rgba(0,0,0,.5);
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
}
#whitewrap.notactive {
margin-left:-235px;
}
2) Change your jquery from
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
to:
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});
You need to add in another button once the menu is open so that the user can close it.
To do the cross:
Make an image or div and give it the class of "closeNav".
Then change your jquery:
$("#block-37, .closeNav").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});

Using jQuery to add a fixed position to a div

I am trying to achieve the effect of an div scrolling until it reaches the top and just stays there.
I have achieved this with:
HTML
<div id="nav">this is nav</div>
<div id="mooey">
<div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>
CSS
#mooey {
background: green;
min-height:250px;
margin-top:300px;
}
#nav {
background:#000000;
position:fixed;
top:0;
width:100%;
height:100px;
}
JavaScript
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});
What I want to do, Instead of stating that the div theFixed is fixed in the style in the HTML. I was wondering if there was a way of applying this using the code.
Reason being is that if the script isn't enables or fails for whatever reason - I want the theFixed div to scroll along with the mooey div rather than be stuck in the middle of the page.
You can see what I have done here:
http://jsfiddle.net/susannalarsen/4J5aj/7/
Any ideas for this?

Use $('#theFixed').css('position','fixed'); to pin it down.

<script>
$(document).ready(function(){
$("#FixedElement").css("position","fixed");
});
</script>

How to hide href attribute of <A> tag via css when using window.print

I've a php page, with a button that able the user to print via window.print function.
I'd need to know how to hide the href attribute of an html tag when printing the page
Example:
if the tag is like follow:
<a href='myurl.com'>HELLO</a>
I want to display just HELLO.
I've to do this only when i use window.print.
I've already set up the css for printing in this way:
#media print {
body * {
visibility:hidden;
}
#section_to_print, #section_to_print * {
visibility:visible;
}
#section_to_print {
position:absolute;
left:0;
top:0;
}
/*
//HERE I NEED A RULE TO HIDE
// ONLY HREF ATTRIBUTE BUT NOT CONTENT OF A TAG
//BUT IN THIS WAY THEY HIDE THE WHOLE TAG OF COURSE
#section_to_print a {
display:none;
}
*/
#page { size: landscape; }
}
And all works correctly, except for the link that was printed with the href part.
Thank you

Thank you, the solution i've found that work form me is similar to your
#section_to_print a[href]:after { display:none; }
In fact, the problem was generated by some css containing a rule like follow:
a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}
Like suggested at this link:
stackoverflow.com/questions/4834517/…
However, thank to much :) Regards

why dont you use:
#section_to_print a{
color:black;
text-decoration:none;
}

How on click button put animation for busy?

How on click button put animation for busy, show popup with that circle and to block all other ( be dark) while not finish job ( 5 sec ) ? I am new and I don't have any idea how to solve this.

your question is not so clear .
i think you want to do this.
jQuery BlockUI Plugin

If you create an element which overlays the page, items under it won't be clickable. To create the overlay, you could just create a new element and remove it using a timeout:
var overlay = $('<div />').css('opacity',0.5).addClass('overlay').appendTo('body');
$(overlay).append($('<div />').text('Loading '))
window.setTimeout(function(){
$(overlay).remove();
},5000);
as for the CSS of the overlay, you could use something like this:
.overlay{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
text-align:center;
}
.overlay div{
margin-top:100px;
color:#fff;
font-size:22px;
}
example:
http://jsfiddle.net/niklasvh/BKWjY/

HTML/CSS "Pop-Up" Window and Disabled Background

This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?

it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..

You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/

thickbox
eg: http://jquery.com/demo/thickbox/

For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript

You can use smoothbox, along with mootools.