How to display overlay on window using php/jquery - php

I have to disable website links all. if i place any overlay on website but it is not the right solution because we can remove that overlay using firebug or any browser tools...so is there any possible to freeze the site with out any actions...
Thanks,
Murali

if you using jquery you can disable link action as follow
$(document).ready(function(e) {
$('a').click(function(e){
e.preventDefault();
});
});
Basically e.preventDefault will intercept the default action

Related

jquery toggle not working on mobile

so i am trying to make it so when you click menu on the mobile responsive version of this site right here http://dev.trafficdigitalagency.com/stage/ it toggles what is display:none; in the class "sub-menu"
here is the javascript/jquery I use (which can be found at http://dev.trafficdigitalagency.com/stage/js.js)
$(document).ready(function(){
$("#menu-item-3121").click(function() {
$(".sub-menu").fadeToggle("slow");
});
});
why when i click on menu in the responsive version does the sub menu not toggle?
I had the same issue the other day. Turns out the click event callback was being set up to fire twice, so the toggle looked like it wasn't firing at all. Ended up having to ensure any existing listeners are removed before adding one back. Note the off() call. Hope this works for you:
$(document).ready(function(){
$("#menu-item-3121").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
If you take a look at the console, (Ctrl-Shift-J in Chrome) where all JS erros all logged, you will see that the real problem relies on the way WordPress is loading the jQuery library in 'no conflict' mode.
I believe the solution provided here by #RedEyedMonster will help you, so write your function as this:
jQuery(document).ready(function ($) {
$("#menu-item-3121").click(function() {
$(this).find(".sub-menu").fadeToggle("slow");
});
});

javascript or jquery popup to display target url in same page

How to open javascript or jquery popup to display target url in same page
either using jquery or javascript
can anyone please provide me with a link i have searched on google but was unable to found a valuable thing
Here's some markup..
Some Site Link
<div id="popup"> This is the popup text pre $.load() </div>
Here's some code...
$('#popup').dialog({
autoOpen: false,
modal: true
});
$('a').on('click', function(e){
e.preventDefault();
$('#popup').load($(this).prop('href'), function(){
$('#popup').dialog('open');
});
});
Just use following things
<script>
$("#target").load("your link");
</script>
lets say you already make the popup appear on click of a link or a button so call a function on onClick event and pass the target url as a parameter. the in that function you can use alert like
alert(url);
and then use
window.location = url;
to redirect the page.
I have implemented highslide js and it is working fine...
Thanks fellows

Click event on button type input is not working

I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.
$('button').click(function(){
alert("click event");
});
I included this in the
jQuery(document).ready(function() {
But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!
Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:
$('body').on('click','button', function(){
alert("click event");
});
should work.
If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery.com/on/
And in your example this might work for you
$("body").on("button","click", function(event){
alert("Hello world");
});
Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...
$('*your_form*').on('click', 'button', function(){
alert("click event");
});
You may simply need to use this instead:
$(document).on('click','button',function(){
alert("click event");
});
(jQuery 1.7 or higher)
you have to call using button id
$('#buttonid').click(function(){
alert("click event");
});
or button class
$('.buttonclassname').click(function(){
alert("click event");
});

jquery smooth site navigation between divs

I am trying to figure out how to smoothly navigate between divs using jquery. I have a php website with 4 navigation divs. So when I click "staff" on the page I navigate to that div. How would I do this using jquery ?
This is how I´m using this:
<div id="top_links">
<p class="top_link">The Firm</p>
</div>
i´m trying to make it look like this website: http://themetrust.com/demos/solo/#services
I´m new to jquery. I cant see how I should do this so any suggestion would be a HUGE help.. Thanks :D
You can animate the scrollTop property with jQuery:
$('a').on('click', function (event) {
//stop the browser from jumping to the anchor
event.preventDefault();
//get the href for this link and the offset from the top of the page for the target of that href
var href = $(this).attr('href'),
oset = $(href).offset().top;
//animate the scroll to the selected element
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
//after the animation is complete, update the hash in the address bar so that the state is saved (if the user refreshed the page they can be brought back to this place, but that takes a bit more code)
location.hash = href;
});
});
Here is a demo: http://jsfiddle.net/Hpegt/1/
This requires that your links are targeting elements on the page using the syntax: #element-id.
Note that .on() is new in jQuery 1.7 and is the same in this case as .bind().
UPDATE
One cool thing that you can do with this is add a custom easing method. If you use the jQuery Easing Plugin ( http://gsgd.co.uk/sandbox/jquery/easing/ ) then you can choose from lots of types of easing. I like easeInOutExpo for animating page scrolling.
You can use the scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/
The example page is using jQuery.ScrollTo
Looks like they're using these libraries:
jQuery.scrollTo
easySlider
visualNav
You'll want to use jQuery's animate() function to adjust the window.scrollTop property to align with the appropriate div.

jQuery flicker using .load

I'm using jQuery to dynamically load php pages into my page using the .load() function, so far this has been successful but if you click on various links to update the div with the .load() it starts to flicker between the new clicked page and the old one, this is pretty annoying and has anyone got a fix?
Current code:
$(document).ready(function(){
$('a').click(function() {
$('#content').load($(this).attr("href"));
return false;
});
});
The flickering is possibly caused because the dimensions of the #content div vary between loads, try to slideTogle it before loading or use another transition between loads
example :
$(document).ready(function(){
$('a').click(function() {
$('#content').slideUp('slow',function(){
$('#content').load($(this).attr("href"),function(data){
$('#content').slideDown('slow');
});
})
return false;
});
});
I hope it is ok to question the premise. You're making all links use ajax to replace #content's contents? Doesn't that break the browser's forward/back button behavior? If so, I personally would not like to use such a site.

Categories