We Keep Coding

Disable Parent Menu Item Fails in Responsive

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>

How can i keep the Menu open with JavaScript and HTML?

i have a SideBar Menu, how can i keep it open? If you go to the page, the Menu is closed and i must click on the Menu Button, to toggle it on. How can i keep it open, i'll close it myself.
Code:
<script type="text/javascript">
$('#nav-btn').click(toggleMenu);
$('main').click(function() {
if ($(this).hasClass('active')) {
toggleMenu();
}
});
function toggleMenu() {
$('#nav-btn, #sidebar, main, #cover').toggleClass('active');
}
</script>

for better practice, write your code inside a .js doc and put your code inside a
$( document ).ready(function() {
// Your code here
});
And not inside a <script> tag..
You can just add the active classes inside the HTML element (wihthout jQuery), if debugging is the purpose.
Try replacing toggleClass with addClass, should help.
Please edit your question and provide the full code (html & css) so we can help you further

onClick show iframe 5000 and then hide

I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?

Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/

You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/

Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>

How to call a function on body load

Hi I am using this script to add social media icon into my site.
<div id="menu" class="shareSelector" style="width:250px; height:250px;"></div>
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
});
div gets the content upon clicking on it.Can we call this function without clicking div means on bodyload?
Regards:Ali

The $(document).ready(function () {}); function should run when the page loads.
Have you got the jquery in a <script> tag?
If so, the bindings are setup by the socialShare plugin, so you may need to look at that.
What does whenSelect option do?

$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
$('.shareSelector').click()
});
Dont know about the socialShare plugin but you have an option there which says "whenSelect: true"
try false

How to Specify an alternate panelContext - EasyTabs

I'm using the EasyTabs plugin by Alfa Jango on my website, and would like to have the panels seperated from tabs. He states in the documentation what I want to do;
Your panels can also be somewhere else in the DOM entirely (outside of
your tab container), if you specify an alternate panelContext.
The panelContext is any jQuery DOM element, in which easytabs will
look for the panels. By default, it's the container on which
easytabs() was called.
So, I understand I have to specify panelContext, say, to look for the panels in div#disconnected.
This is what I tried, but nothing works...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: '#disconnected';
});
});
</script>
Or trying to change the $container...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
$container: '#disconnected'
});
});
</script>
Any help would be greatly appreciated!

I have a same problem as you, and found the answer:
You should type as:
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: $('div#disconnected')
});
});
Found after looking the code here: Easy Tabs Github
Hope it helps