I'm customizing a theme for a client and trying to find a way to remove the dropdown functionality of the main navigation links. When you click on a top-level link, the menu closes (or opens). I'm not sure why they built this into the theme as I think it's very confusing to the user, not to mention doesn't work properly on mobile. I really need the menus to open on hover but not onclick.
I believe this is being done using a combination of CSS3 and Javascript (https://github.com/viljamis/responsive-nav.js). There's probably a simple solution by just editing the responsive-nav.js. But I'm not a javascript coder. Any help would be GREATLY appreciated.
The site is here: http://www.gatewayfitnesscenter.com
Code I believe controls this: http://gatewayfitnesscenter.com/wp-content/themes/westand/scripts/frontend/responsive-nav.js
In your theme's scripts/frontend/functions.js, locate this block of code (two lines after "//menu toggle"):
jQuery("#menus li.sub-icon > a") .click(function(){
jQuery(this).next().toggle(200);
return false;
});
That is the click handler so go ahead and remove it and you should be good!
OK, so it turns out this will be a fairly easy CSS tweak to get what you want. Open the style.css file for your "westland" theme. Now, search for .navigation ul li:hover > ul {. The first line after that is visibility: visible;. Either delete that line or comment it out and save the file. If you really want to avoid unnecessary work in the browser, delete/comment the entire block within. I've included the entire block below after commenting it out.
.navigation ul li:hover > ul {
/*
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
*/
}
That should prevent hovering over those menus from showing the sub-menu.
Related
first time posting a question so sorry if I make mistakes.
I have the following JS code for creating "notes" with a specified rotation:
newNote.style.transform = rotate(30deg);
it works great but when I try to use this CSS it does not get applied (should reset the rotation):
.notes:hover{transform: none;}
so after some more trying I think it could be a bug as styling never apply on hover if they been applied in the JS (is there any fix for this or should it be reported as a bug?)
Using !important can help you. Example:
.notes:hover{transform: none !important;}
Please remove your js code and use these instead:
.notes { transform: rotate(30deg); }
.notes:hover{transform: none;}
The first line adds the rotation always.
If you want to add rotation in specific case, use these styles instead:
.notes.rotate { transform: rotate(30deg); }
.notes:hover{transform: none;}
In your js, add 'rotate' class to the element you need:
newNote.classList.add('rotate');
It will add the rotation.
I spent hours to figure out what JavaScript function or CSS3 rules is making the smooth Dropdown function in This Demo but I couldnt figiure it out.
Then I tried to create my own slideToggle as:
$(function() {
$('.selectopt').click(function() {
$(this).next('.dropdown-menu').slideToggle(500);
});
});
which is not as good as the above mentioned demo and there are some issue with it as it just slide down and up the .dropdown-menu ONLY if user clicks on the top of .selectopt and it doesn't care about losing focus or selected options!.
Considering all of these can you please let me know what is making the smooth slide and fade presentation of the .dropdown-menu in the demo? Thanks
It's "fancy" fading using transition of 0.25s. on
dropdown-menuclass.
The demo you mentioned is using external resources
looking at the code
$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
you can see that it's using .selectpicker() which is coming from Bootstrap select plugin. The object passed {style: 'btn-primary', menuStyle: 'dropdown-inverse'} contains only css classes to style the dropdown menu which are contained in Flat UI CSS. When the code is executed the underlying HTML is changed to
Class dropdown-menu contains the following rules
.dropdown-menu {
background-color: #f3f4f5;
border: none;
display: block;
margin-top: 8px;
opacity: 0;
padding: 0;
visibility: hidden;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
transition: 0.25s;
}
Conclusion: It's "fancy" fading using transition of 0.25s.
There's a whole bunch of external resources in the fiddle:
bootstrap.min.css
bootstrap.min.js
flat-ui.css
bootstrap-select.min.css
bootstrap-select.js
As far as I can see, flat-ui.css is responsible for the fancyness.
I'd recommend adding all the external resources from the fiddle and when you're done with the dropdowns, try removing each one to see if any of them aren't used. In the fiddle they are all requered.
I am looking for a way to control the CSS for a specific item on hover. Since it's not an element directly in the parent lineage, I can't use CSS.
<article class="portfolio-item web">
<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
<img src="http://localhost/wordpress/wp-content/themes/dewuske/images/portfolio/introspection.jpg" alt="">
<span class="genericBeaconIsotope">
<span class="beaconContainer">
<span class="beaconBar"></span>
<span class="beaconCircle1"></span>
<span class="beaconCircle2"></span>
<span class="beaconText">Introspection</span>
</span>
</span>
</a>
</article>
I'm trying to hover on beaconContainer and have the image be affected. It should function like a rollover. Here is what I'm trying to accomplish in CSS:
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
transition: all 1s ease-out 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
How would I go about doing this? I know very little JavaScript or jQuery or how to call events from them, especially like this. Thanks
JQuery provides several methods which may be helpful to you.
You could go about manually setting the CSS using the .css() method, or apply CSS classes dynamically to the elements (this is would be my preferred way) using the .addClass() and .removeClass() methods, reacting to user events such as mouse overs, etc.
NB: This is specifically a jQuery solution to the problem presented by your question.
In jQuery, you can use the addClass and removeClass functions. Keep all of the css in the css file, and then just change the class of each element.
http://api.jquery.com/addclass/
You need to create a CSS class with the styles you want to apply:
.rollover {
/* your styles here */
}
and a bit of jQuery that enabled your styles when mouse is over the beaconContainer:
$('article.portfolio-item.web').each(function(index, articleElem) {
var article = $(articleElem);
var image = article.find('img');
var container = article.find('.beaconContainer');
container.mouseover(function() { image.addClass("rollover"); });
container.mouseout(function() { image.removeClass("rollover"); });
});
It will also work if you have multiple articles on page.
You can create the CSS class and then add it to the container when you hover and then remove the class once you mouse out:
$('.beaconContainer img').hover(function(){
$( this ).addClass(cssClassName);
}, function() {
$( this ).removeClass(cssClassName);
}
);
I am trying to arrange my html/css/jquery so I can toggle the visibility of a
div by double clicking on it. I can make it hidden by a double click but when I
double click again it does not reappear. When I check to see all of the div outlines,
the outline of this div is no longer there. I use a web developer plugin to check.
I am using the following codes to try to accomplish this:
My css classes are..
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
the html is...
<div id="ConstructionDiv" ondblclick="unhide('ConstructionDiv')" class="unhidden">
<!.. the div is unhidden at page load. When I look at generated
source code after the double click the class is "hidden"
-->
</div>
my javascript is...
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
Is it possible to do what I am trying? There must be something that works.
Thank you.
I just tried this, and invisible elements cannot receive click events.
As Andy said, Opacity 0 can receive click events just fine, and the contents are still invisible.
Use the following css rules:
.hidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
-moz-opacity:.1;
-khtml-opacity: .1;
opacity: .1;
}
.unhidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}
UPDATE
You can also wrap the element in some other element like div and then use the click of that div to show or hide the inner content.
What if you have two divs, both placed absolutely, but one possibly much larger than the other. clicking one changes the visibility of both of them.
I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.
I have found this extremely difficult to implement.
The site is here:
www.samueljamesdesign.com
Any help would be greatly appreciated.
Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.
To make things stay flipeed when clicked, with your new CSS, you do:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});