I have a menu button which is half visible and half outside the screen. The full button is visible only when it is 'hovered' (I've written CSS for this, the button moves horizontal so it is displayed fully). Now this works on Desktop website. But as you know hover is not available on Mobile sites, so hover is converted to click. The click makes the button fully visible but it does not hide again when clicked again, because we have not defined click event to display and hide it, because it won't interfere with hover.
So is there any short and efficient way to do this, so that hover works on desktop and click works on phone for the same (display and hide) function?
You can use CSS or jQuery or both.
For your case, I suggest you set a hover function within a break-point that suits desktops and a click function within a break-point that suits mobile device. See my example below and adjust as needed.
$(document).ready(function() {
// When document is ready check window width, then choose hover/click
if ($(window).width() > 768) {
$("div").hover(function() {
$(this).toggleClass("increase");
});
} else {
$("div").click(function() {
$(this).toggleClass("increase");
});
}
});
div {
width: 50px;
height: 15px;
line-height: 45px;
margin: 0 auto;
background: red;
color: white;
border-radius: 5px;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: all 1s;
}
div.increase {
width: 150px;
height: 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> I am the Button</div>
Note: in my example; hover toggles the height/width when device width is wider than 768px, while a click toggles the height/width when device width is less than 768px
its simple try this
1 - disable hover on mobile device using media query
#media screen and (max-width:767px){
button:hover{ just disable css u r using }
}
2- add this jquery - this code adding and removing a class on the button click
$('button').click(function(){
$(this).toggleClass('btnClick');
});
3: now write the same hover css for this class
.btnClick{
}
Related
I'm looking for a simple way to persist a "hover" style on a page refresh if the user did not move his mouse. The issue is that the hover style is only triggered on a mouse enter/mouseover event, so on a page refresh it will not be applied even if the cursor is above the item in question until the user touches the mouse again and moves it slightly. The code below has this issue.
$('div').click(function () {
window.location.reload();
});
div {
width: 100px;
height: 100px;
background: grey;
}
div:hover {
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
can you set the a:visited { background-color:black;color:#fff} Of course this would apply to the whole page so all your visited backgrounds would be black. I've never tried to marry div a:visited{background-color:black;color:#fff;} so not sure that would work. They say nothing ventured, nothing gained.
*Edit: Everyone is disliking this post :(
So I want a button (I'll make a hamburger text) and when I click the button I want the whole page (the navigation element) to become (100% width and 100 height and I'll put flex in it) the navigation menu and when I click the button again the navigation element disappears.
What I want to know:
How do I do the CSS so that the navigation element opens over everything else?
position:absolute?
(After I know how to put the navigation element over everything else -
Maybe display: none on the navigation page and somehow put it over everything when I change display: visible with JS?)
Where can I find JS (because I don't know it yet) to edit CSS of the navigation element on click?
Something like this from W3, but I will probably need to change the diplay from none to visible and back again:
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
In order to set your navigation into full screen, you should use position:fixed property of css. In order to properly hide and show the navbar you should toggle the class of the element instead of directly applying the display style. Take a look at below example to understand it better -
let btn = document.getElementById('btn');
let nav = document.getElementById('nav');
btn.addEventListener('click', function(){
//event listener toggling the active class
if(nav.classList.contains('active')){
nav.classList.remove('active'); //remove active class if already added
} else {
nav.classList.add('active'); //add active class if not added
}
});
html, body{
height: 100%;
width: 100%;
}
nav{
display: none; /*default in hidden state*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
color: white;
}
nav.active{
display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}
#btn{
position: fixed;
top: 40px;
left: 10px;
z-index: 100;
}
<nav id="nav">
Full screen content
</nav>
<button id="btn">toggle full screen element</button>
<p>Some static content</p>
Try to add css position:absolute; and z-index=99 to your navigation element and toggle its display with onclick.
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too.
How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll?
Here is a Link of a Site that shows exactly what I would like to reprogramm.
Please visit this Site as an example
Thanks in advance
CSS:
#element {
display: none;
/* and other CSS */
}
jQuery:
$(document).on("scroll", function () {
if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
$("#element").fadeIn("slow");
} else {
$("#element").fadeOut("slow");
}
});
First, the element has fixed positioning and is hidden:
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
left: auto;
...
Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.