I am using the following code to toggle my mobile navigation
html
<p>toggle</p>
I have a function which attaches the proper code/css and just need it to act as a button but not go anywhere (hence the '#').
However I want nothing to show up when it clicks/hover, since the browser usually indicates where the link is going, I don't want that (or anything else) to show
As Michael suggested, why not try using a button instead? Your code would look like this
<button class="toggle-nav"><p>toggle</p></button>
All you'd have to do is change any CSS/JS you have to reference the button instead of an a tag.
You may style the link with pointer-events.
.toggle-nav {
pointer-events: none
}
<p>toggle</p>
Related
So I have installed audio.js on my website. All works ok. I want it to change how it looks. Actually, I want that it would appear only as Play button (or play/pause button). Or in other words: I want to hide progress bar and "time passed | time remaining". How can I do this?
audiojs has settings that u can customize the style and markup, please refer to the documentation
If you wanna use default class names, you can overwrite their styles by adding css something like this:
.audiojs .scrubber {
display: none;
}
There is the working source code link: https://jsfiddle.net/qp5xjxb9/3/
Why is the icon still visible even with display: none?
.toc.item {
display: none;
}
<a class="toc item"><i class="sidebar icon"></i></a>
In addition to #GCyrillus I want to suggest right clicking the icon and choose "inspect element" in the browser. Look for your code. If it's striked through something else is overwriting your code. Search for a display that's not striked through to see what is messing it up. If you can't find your code the css file is not properly linked.
If you're having trouble overriding the code that's overriding yours in the first place, you might want to add !important to your code.
display: none !important;
The code provided here works. (you can see that by clicking run snippet)
My guess is you have not posted the full contents of your .css file and that you have another css entry contradicting what you are doing here.
Nothing wrong with your code. Check if your CSS is correctly linked to your document or if another rule is overriding it.
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.