I am using update panel and pagination links by repeater control at the bottom of the page. Now when we click on pagination links, the page is not focused on the top of the page. I have tried the folllowing jquery code
<script type="text/javascript">
$(document).ready(function () {
$("#<%=rptPager.ClientID %> a").click(function () {
parent.window.scrollTo(0, 0);
});
});
</script>
but it doesnot work... Please help me!!!
i think you were looking for window.scrollTo(0, 0);
parent.window.scrollTo(0, 0); won't work in your code, since parent will be undefined.
this.parent however, would point to the parent of the element you clicked.
Related
I'm self-taught when it comes to web design and so I really am stuck here because I don't have the framework for understanding the problem. My website (sealinesd.com) is OK EXCEPT the parent links should be disabled AT ALL TIMES. Right now it works like this:
-- when the regular non-responsive menu is up, the parent links are disabled thanks to the plugin I use (code below).
-- when you hover on the non-responsive menu and the parents are disabled, and THEN you make the browser smaller, the responsive items you hovered on before are still disabled.
-- when you go straight to the responsive menu without first hovering on the parents in non-responsive mode, the parent links are NOT disabled.
I have very little knowledge of jquery and DOM so I was unable to fix the plugin. I tried to target the mean-menu (used in responsive mode) and use document.ready to make sure it wasn't executing too early, or something, but neither worked for me. Please advise. I thank you kindly in advance.
The code for the plugin I use to disable parent links is right below.
Plugin Name: Advanced Disable Parent Menu Link
Description: A plugin which allows you to disable parent menu link.
Author: Kapil Chugh
Plugin URI: http://kapilchugh.wordpress.com/
Version: 1.0
add_action('wp_footer', 'advanced_disable_parent_menu_link');
function advanced_disable_parent_menu_link () {
wp_print_scripts('jquery'); ?>
<script type="text/javascript">
if (jQuery("ul li.page_item:has(ul.children)").length > 0) {
jQuery("ul li.page_item:has(ul.children)").hover(function () {
jQuery(this).children("a").removeAttr('href');
jQuery(this).children("a").css('cursor', 'default');
jQuery(this).children("a").click(function () {
return false;
});
});
} else if (jQuery("ul li.menu-item:has(ul.sub-menu)").length > 0) {
jQuery("ul li.menu-item:has(ul.sub-menu)").hover(function () {
jQuery(this).children("a").removeAttr('href');
jQuery(this).children("a").css('cursor', 'default');
jQuery(this).children("a").click(function () {
return false;
});
});
}
</script> <?php
}
I tried this code too and it didn't work. I'm frustrated. Don't know how to target that damn responsive menu.
wp_print_scripts('jQuery'); ?>
<script type="text/javascript">
jQuery(document).ready(function () {
if (jQuery("nav.mean-nav > li:has(ul.children)").length > 0) {
jQuery(".mean-nav > ul > li:has(ul.children)").hover(function () {
jQuery(this).children("a").click(function(evt) {
evt.preventDefault();
});
jQuery(this).children("a").css('cursor', 'default');
}
});
I took a look at your site. It appears to be built from a template that has created its own responsive functionality.
Personally, I would suggest that you look into using Bootstrap to build your own pages. Bootstrap is extremely easy to implement once you understand the 12 column grid system.
Bootstrap has responsive menus with dropdowns like this all rolled in out of the box and it works great, see this example
You could easily duplicate the look of your template using bootstrap in very little time and there are TONS of resources online to help you.
Anyway, that said, if you want to to stop a click on a link from navigating to the link's href location you can use .preventDefault(); like this:
// prevent navigation when clicking links with the class preventDefault
$(document).on('click', '.preventDefault', function(e){
e.preventDefault();
});
// just to show that other events still make it through
$('#test').click(function(){
$('#result').append('click detected<br>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click this link<br>
<div id="result"></div>
I want to scroll to the top of the parent page once a form in an iframe has submitted. I've tried many different ways to do this including adding onload to the iframe tag itself and with jQuery/JS, none have worked so far, now I'm trying:
<script type="text/javascript">
<!-- BEGIN HIDING
window.onload = pageScroll; function pageScroll() {
window.scrollTo(0, top);
scrolldelay = setTimeout('pageScroll()', 200);
}
// DONE HIDING-->
</script>
Test page is here: http://www.moneycorp.com/uk/personal/General-Enquiry2/
Any ideas why this doesn't work? Thanks.
I am using the following JS to make my bootstrap v3 navigation expand on hover.
I have done this so that the parent link can be a link.
<script type="text/javascript">
jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});
});
</script>
I have an issue on mobiles though, where you click on the parent link and you momentarily for a split second see the children links - but you go straight to the parent link... so you don't have the ability to choose a child link below the parent.
Site: http://crawfordtech.fastnetstaging.co.uk
The parent link in question is called "Solutions".
Any ideas what can be done?
you can wrap it in a condition, so it'll runs when u need it
I just copy pasta'd from a previous project so ignore or feel free to use the script that is inside. it also makes drop downs.
<script type="text/javascript">
//boostrap hover script
jQuery(document).ready(function($){
if ($(document).width() > 800){
(function(e,d,b){var a=0;var f=null;var c={x:0,y:0};e("[data-toggle]").closest("li").on("mouseenter",function(g){if(f){f.removeClass("open")}d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mousemove",function(g){if(Math.abs(c.x-g.ScreenX)>4||Math.abs(c.y-g.ScreenY)>4){c.x=g.ScreenX;c.y=g.ScreenY;return}if(f.hasClass("open")){return}d.clearTimeout(a);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mouseleave",function(g){d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.removeClass("open")},b)})})(jQuery,window,200);
}});
</script>
I have this bit of code below which expands and collapses the results from a search. The search displays the search results on the same page so the whole page isn't reloaded. It works the first time - i.e the first search, however for future searches the expand collapse feature stops working. I think its because the page isn't reloaded but Im not sure how to fix it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 /jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.section').hide();
$('h2').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
</script>
<?php include('db.php');
$descr = $_POST['search'];
echo '<ul id="user_list">';
$user_query = $db->query("SELECT * FROM tblVulns WHERE Name LIKE '%".$descr."%'");
while($user = $db->fetch_assoc($user_query))
{
echo ' <h2 style="cursor:pointer">'.stripslashes($user['Name']).'</h2>
<div class="section" style="display:none"> <h3>'.stripslashes($user['Risk']).'</h3><p>
<h4>'.stripslashes($user['Summary']).'<p>'
.stripslashes($user['Description']).'<p>'
.stripslashes($user['cveCode']).'<p></div>';
}
?>
The code at the bottom is the php receiving the search results. The code at the top is the js that is dealing with expand and collapse
Any help in how to get this work for all searches after the page has loaded would be great. Thanks
You are adding your event listener to the click event of any h2 elements that are present on page load. It sounds like you are then loading in new content and expecting the same code to work for them.
Instead, you will need to do this:
$("body").on("click","h2",function(){
$(this).toggleClass("open");
$(this).next().toggle();
});
Which will work on any h2 that is on the page. If you want only h2s in a certain container to have the effect then replace body for a reference to that element
EDIT:
I see now that you are using quite an old version of jQuery that doesn't support the on() function. I would suggest upgrading if you can, or use Abhishek Saha's answer if you cannot.
I think one of the reason, it doesnt work after the first search is because the new element which gets loaded, is not bind with the click action.
Try this:
replace
$('h2').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
});
with
$('h2').live('click',function () {
$(this).toggleClass("open");
$(this).next().toggle();
});
I'm having a problem with this tiny script I wrote for a website I'm creating. I'm totally new to JavaScript, so forgive me if I'm missing something that might be obvious to you.
The aim of the script is to hide a div as soon as the page is loaded, and then to show it when the user clicks on an element in a dropdown menu. Here it is:
$(document).ready(function(){
$("#cdcpanel").hide();
$("#contrpanel").hide();
$("#clickme").click(function() {
$("#cdcpanel").show(200, function() {
});
$("#contrpanel").hide(200);
});
$("#clickme2").click(function() {
$("#contrpanel").show(200, function() {
});
$("#cdcpanel").hide(200);
});
$("#hideall").click(function() {
$("#cdcpanel").hide(200);
$("#contrpanel").hide(200);
});
});
As you can see, the divs cdcpanel and contrpanel are initially hidden. Clicking on the element called clickme will cause cdcpanel to be shown and contrpanel to be hidden. Clicking on the element clickme2, instead, will trigger the opposite event. The problem is that it won't work on other browsers apart from Firefox. I've tried it up on Chrome and IE and the result is that the div is initially hidden, but then nothing happens by clicking on the dropdown menu.
This script relies on JQuery. It's called at the beggining of the page using the following:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsshow.js"></script>
Any suggestion on how to make things work is welcome! Thanks in advance for your time and patience.
I don't believe that dropdown menu's option elements have click events. try change event.