I'm having the following scenario. I have a menu and if one hovers over the menu a sub menu appears and if mouse moves out the sub menu disappears, now I want the following if I click on the on a item in the sub menu, I want the sub-menu to remain open, when the new page has been loaded. I'm using superfish Jquery plugin for this.
Is this possible and if how.
my code in html
<div id="nav">
<div id="nav2">
<ul class="sf-menu sf-navbar ">
<li>
<a title="HOME" class="sf-with-ul " href="/index.php?r=site/index&sid=1">HOME</a> </li>
</ul>
<ul class="sf-menu sf-navbar">
<li>
GALLERY
<ul class="subs" id="sub1"><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Kitchens" href="/index.php?r=images/sddsd&id=1">Kitchens</a></li><li><a title="Vanities" href="/index.php?r=images/sddsd&id=2">Vanities</a></li></ul> </li>
</ul>
<ul class="sf-menu sf-navbar ">
<li>
<a href="?sid=3" class="sf-with-ul " >ACCESSORIES</a>
<ul class="subs" id=""><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Door Handles" href="/index.php?r=images/sddsd&id=2">Door Handles</a></li><li><a title="Spanners" href="/index.php?r=images/sddsd&id=1">Spanners</a></li></ul> </li>
</ul>
<ul class="sf-menu sf-navbar ">
<li>
<a title="CONTACT US" class="sf-with-ul " href="/index.php?r=site/contact&sid=4">CONTACT US</a> </li>
</ul>
</div>
</div>
and then
the superfish code
$(function(){
$("ul.sf-menu").superfish({
delay: 0,
speed: 'fast',
autoArrows: false,
dropShadows: false
});
});
I've also noticed that the following css code is used to display the item
left: 0;
top: 2.5em;
z-index: 99;
I post a demo for you. Basically I've added a "onHide" function to the superfish function, then some additional coding that keep the menu persistent.
Additional CSS (to default suckerfish.css)
.sf-menu li.sfSelected {
background-color: #CFDEFF;
}
Script
$(function(){
var menu = $("#nav");
menu.find("ul.sf-menu")
.superfish({
delay: 0,
speed: 'fast',
autoArrows: false,
dropShadows: false,
onHide: function(){
if (this.parent().is('.sfPersist')) {
this.show().css('visibility','visible').parent().addClass('sfHover');
}
}
})
.find('li > ul > li').click(function(){
// hide previously persistent children (LOL that just sounds wrong)
menu.find('.sfPersist')
.removeClass('sfPersist sfHover')
.find('> ul').hide().css('visibility','hidden');
// add children that should be persistent
if ($(this).is('.sfSelected')) {
// if previously selected, keep hidden
menu.find('li.sfSelected').removeClass('sfSelected');
} else {
// Hide other selected classes
menu.find('li.sfSelected').removeClass('sfSelected');
// if newly selected, then show
$(this)
.addClass('sfSelected') // remember which one is selected
.parent()
.show().css('visibility','visible')
.parent().addClass('sfHover sfPersist');
}
});
});
Related
So I am refactoring and redesigning an old application and I have multiple dropdown menus that hold data for people to enter and I would like for there to be a button that when clicked on scrolls to the next one and opens it just to make it easier to get through the form.
My html code looks like this:
<?php foreach loop that adds more dropdowns when entered in through a modal when they click new?>
<button class="tEntry-collapsible-btn tsHeader-collapsible-btn waves-effect"
id="testing"
type="button"
style="background-color: sienna !important;"></button>
<div class="tEntry-collapsible-row>
<div class="tTable-row">
//content to dropdown
</div>
</div>
....usually around 10-15 dropdown menus with the collapsible btn
<?php loop++ ?>
I added a photo for reference, the dropdown buttons are color coordinated and I added a next button at the bottom (minimal styling) and as of right now when the buttons are clicked it drops down fine but I'd also like a button that when clicked i guess focuses the next one and then opens it just for a smoother experience when working your way down the page.
Something like this?
Find the next dropdown and scroll to it with .scrollIntoView().
You would just call the function that drops the dropdown on the next element.
Note: not working well in the snippet... try my codepen
$(function() {
$(document).on('click', '.next', function() {
var el = $(this).closest('.dropdown');
var parent = el.closest('.wrap');
var next = el.nextAll('.dropdown').first();
// scroll like this
// parent.animate({
// scrollTop: next.position().top
// }, 1000);
// or like this; I prefer this one
next[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
.wrap {
height: 200px;
overflow-y: scroll;
}
.something {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="dropdown">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<button class="next">next</button>
</div>
<div class="something"></div>
<div class="dropdown">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<button class="next">next</button>
</div>
</div>
i am currently working on an drag and drop system.
I would like to add an form that sends the outcome of the dragged boxes(location there currently in set by visitor) to my e-mail. Code is below.
<style type="text/css">
/* show the move cursor as the user moves the mouse over the panel header.*/
#draggablePanelList .panel-heading {
cursor: move;
}
</style>
<!-- Bootstrap 3 panel list. -->
<ul id="draggablePanelList" class="list-unstyled">
<li class="panel panel-info">
<div class="panel-heading">You can drag this panel.</div>
<div class="panel-body">Content ...</div>
</li>
<li class="panel panel-info">
<div class="panel-heading">You can drag this panel too.</div>
<div class="panel-body">Content ...</div>
</li>
</ul>
jQuery(function($) {
var panelList = $('#draggablePanelList');
panelList.sortable({
// Only make the .panel-heading child elements support dragging.
// Omit this to make then entire <li>...</li> draggable.
handle: '.panel-heading',
update: function() {
$('.panel', panelList).each(function(index, elem) {
var $listItem = $(elem),
newIndex = $listItem.index();
// Persist the new indices.
});
}
});
});
All help is welcome!
I am working on a single page website, I have following navigation bars:
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
its working on the section id in the section tag. like
<section id="home">
<section id="accommadation">
how to give class="active" for navigation?
Try this
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.nav_menu').click(function(){
$('.nav_menu.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Its not dependent on Codeigniter or PHP as it is Single page website you need some client side javascript code or use jQuery like,
$(function(){
$('.navbar-nav a[href^=#]').on('click',function(e){
$('.navbar-nav a.active').removeClass('active');
$(this).addClass('active');
// if you want some animation for the element to scroll then use animate()
$('html,body').animate({scrollTop:$(this.href).offset().top},900);
});
});
I created a menu in the header.php that will be included in each file, like index.php or contact-us.php.
The only problem, I have now, is to add selected to the selected main category in the menu.
This following code basically works until the selected page is loaded, after that, the selected attribute is removed.
Could you please help me to fix this problem?
HTML
<nav id="navigation">
<ul id="navtop">
<li class=" first has_navchild" id="Home">
Home
<ul class="submenu">
<li class=" first has_navchild">
Home
</li>
<li class=" last">
Who we are
</li>
</ul>
</li>
<li class=" has_navchild" id="Contacts">
Contacts
<ul class="submenu">
<li class=" first has_navchild">
Where we are
</li>
<li class=" last">
Contact form
</li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function () {
$('#navigation ul li').click(function(event){
event.preventDefault();
if(($(this).attr("id") === "Home"))
{
alert($(this).attr('id'));
$("#navigation ul li#Contacts").removeClass("selected");
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
alert($(this).attr('id'));
$("#navigation ul li#Home").removeClass("selected");
$("#navigation ul li#Contacts").addClass("selected");
}
});
});
Thank you for the help
I use this method:
$(window).load(function() {
var url = window.location;
$('#navtop a').filter(function() {
return this.href == url;
}).parents("li").addClass('selected');
});
It checks the current page loaded and automatically adds 'selected' class to its parent <li>
It's normal, your document ready was loaded when all is loaded, after you use an event onclick, but in fact nobody has clicked ... So nothing append.
First use this code for add good class on load :
$(document).ready(function () {
if(($(this).attr("id") === "Home"))
{
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
$("#navigation ul li#Contacts").addClass("selected");
}
});
And add your on click function after ...
$('#navigation ul li').click(function(event){
event.preventDefault();
if(($(this).attr("id") === "Home"))
{
$("#navigation ul li#Contacts").removeClass("selected");
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
$("#navigation ul li#Home").removeClass("selected");
$("#navigation ul li#Contacts").addClass("selected");
}
});
I asign class to element but after loading page the class is removed.
I use this function in my script.js
$('#main-nav li ul li a').click(function(){
$('#main-nav li ul li').children().removeClass('current');
$(this).addClass('current');
});
and this in my PHP view:
<ul id="main-nav"> <!-- Accordion Menu -->
<li>
<a href="#" class="nav-top-item no-submenu"> <!-- Add the class "no-submenu" to menu items with no sub menu -->
On site
</a>
</li>
<li>
<a href="#" class="nav-top-item current"> <!-- Add the class "current" to current menu item -->
Programs
</a>
<ul>
<li>Manage country</li>
<li>Manage channel</li>
<li>Manage Comments</li>
<li>Manage Categories</li>
</ul>
</li>
</ul> <!-- End #main-nav -->
If I use this <li>Manage</li> the class current is added but after load is removed.
How can I add class if I use php code after load page or have you any solution ?
jQuery is scripting language ... When loading the page it will definitely remove your previous functionality as click event doesn't fired so it won't work....
After loading the page just put some logic through PHP ....
with JQuery you can execute code when page is loaded :
$(document).ready(function(){
// your code here
});
this should work:
$(document).ready(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
if it doesn't work, try this block of script before </body> at the end of your document:
<script type="text/javascript">
$(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
</script>
this will force the execution after all the html is rendered by the php
First of all wrap your function in a $(document). ready(function () {}) and use the $('#main-nav'). on('click', 'li > a', function () {} ) approach inside of it. . on() is better to attach event listener to an dynamically loaded elements.