When I click a link the font-size does not get bigger on iOS but on android it does work. How do I get it to work
What I have tried:
ontouchstart="" in the body tag
jQuery:
$(".primary-menu li a").on('click', function() {
$(this).css("font-size", "15px");
});
CSS:
.primary-menu li a:focus {
font-size: 15px !important;
}
Neither the jQuery or CSS Works on the iOS only Android
Thank You
I had the same problem of non working :focus selector (in my case on a button) on iOS and this is my solution:
<button onclick="this.focus()">Button</button>
So it is necessary to manually focus() the button onclick (I have no clue why). In my case it seemed to be to only working solution, tried others here:
https://jsfiddle.net/sz1L75ro/8/
In case of the problem of the threadstarter I would suggest to also add the same onclick listener to the a elements:
<a onclick="this.focus()">Link</a>
By no means an expert on css, or JavaScript for that matter but Googling around the same subject area (pure css event actions for iOS/mobile) has shown me that examples are quite hard to come by, however where I was looking for examples with flyouts here is an interesting example:
[https://codepen.io/Tont/pen/hdsev][1] - Using a checkbox with 'display: none' over a button. The css references whether this input is 'checked' here:
input:checked ~ ul.submenu{
max-height:300px;
transition:max-height 0.5s ease-in;
}
The same hidden checkbox methodology could be used to implement a pure css 'click' event handler with the action to be taken being change the font size of the <a> element.
Can't really help you with the JQuery as I don't have a way to test my code easily on iOS, however maybe try .setAttribute(<attribute_name>, <attribute_value>) instead of .css.
Related
I'm looking for a modal popup made purely out of CSS only. I don't even need any animations, but I'd like it to have a semi-transparent full screen white background blocking the page. I've found a few just searching, but the problem is that they use href tags to open and close the popup window. So the problem is that when you click on the links, the page moves to that href tag.
I found one here http: //codepen.io/maccadb7/pen/nbHEg but like I said, it uses href tags so the page moves to that href tag. I'm using these on long pages with much content, so I need the page to stay in the same spot when it's used.
Maybe there's a way to use label and IDs instead of 'a hrefs'?
I really could use the help, thank you in advance.
You could make use of CSS and a checkbox-hack as described here: https://css-tricks.com/the-checkbox-hack/ with an overlay demo shown here: http://codepen.io/Idered/pen/vytkH
As stated in the article and show in the demo you are able to hide a checkbox, attach a label referencing the checkbox id as for. Then on clicks show an overlay, which is otherwise not displayed. Adding on to that, you are also to add transitions to fade the modal/overlay in/out.
Example of CSS to make it work:
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
HTML:
<label class="btn" for="modal-1">Show me modal with a cat</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
</div>
I don't think it's currently possible.
Pure CSS modal uses :target as a trick to react to the click, since CSS doesn't have events.
I don't know any other tricks you can use to substitute :target.
Maybe could try to make the modal fixed when not :target, so when the user clicks, it won't scroll. I tried to do it, but my skills in CSS is limited and I tried for less than 5 min. I'm not sure it will work, tho.
There is actually a CSS trick for building a gallery without href. The problem is that in my opinion is not elegant and requires hidden radioboxes.
Article: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked#Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values
Demo: https://developer.mozilla.org/#api/deki/files/6268/=css-checked-gallery.zip
But I would definitely opt for the "href way" – or at least that's what I did when I wrote my own pure-CSS slide renderer…
As far as I'm aware, this isn't possible. CSS isn't a reactive language, unlike javascript, which can handle events from user input. The CSS-only solutions that you've found navigate away from the page so that the page can show the modal on load.
The CSS-only solution you linked is very clever, and it's about as close as you can hope to get. Sorry!
For my website I will need to use <span> instead of <a>, because I am using mostly ajax and thus instead of links I have onclick ajax events as attributes in my spans.
As a result, I had to manually style the spans to look like links. I have used hover and visited pseudo classes to change background and text colour, but to change the mouse default to a pointer finger on hover, will I need to use javascript? Or can I do that using css?
Also, I have just realized: I could not just use the <a> tag anyways instead of <span>, but just instead of an href, I would include an onclick? It should work just the same, no?
span {
cursor:pointer;
color:blue;
text-decoration:underline;
}
Hyperlink<br />
<span>Span</span>
Additionally, you can use :hover pseudo-class to style the element when hovered (you can use any styles not just the ones originally used). For example:
span:hover {
text-decoration:none;
text-shadow: 1px 1px 1px #555;
}
Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.
You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:
Link
than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.
Than you don't need to bother with span hover and anything - but just for the sake of it
span:hover {
cursor:pointer;
}
will enable hover hand cursor on hovered span.
Option1
Just use an anchor link as follows:
Link
Option2
I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.
span {
color: #000000; /* Change this with links color*/
cursor: pointer;
text-decoration: underline;
}
span:hover {
color: #444444; /* Change the value to with anchors hover color*/
}
Just add cursor:pointer; in your span css.
Use CSS to display the cursor as a pointer:
<span style="cursor: pointer;">Pseudolink</span>
http://jsfiddle.net/kkepg/
You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:
span:hover{
cursor:pointer;
}
You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.
You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.
You could use a button instead of span and use bootstrap css classes to style it like a link:
<button class="btn btn-link">Link</button>
It will react on mouseOver as normal links do.
Run the code snippet to preview the result:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button class="btn btn-link">this is my link styled with bootstrap</button>
You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:
<a href="#" onClick="myfunction();return false;">
or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.
You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:
<a href="javascript:void(myFunction())">
Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.
Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.
EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .
I'm creating a button (actually just a link), which design is rather complicated, and as I am optimizing for IE8, can not be made with CSS3. I have therefore placed a <span> inside the <a>, and put a background image on both.
The image changes on :hover and :active. It works pretty great in all browsers, but not so much in IE. :hover works fine, but when clicking on the <span>, the :active state of the parent <a> is not triggered. It sort of makes sense, but I've seen it work before, so I guess there must be some workaround?
Here's a fiddle: http://jsfiddle.net/TheNix/EtjL3/
You can try using the following jQuery to add the css inline on click.
$("a, span").click(function(){
$(this).css("background", "green")
$(this).find("span").css("background", "lime")
});
Here's a jsFiddle for it http://jsfiddle.net/ollie/r5NDw/1/
alternatively you can add classes on click using addClass();
You can set a css class for the active state using jquery or javascript.
Edit
You can set a css class like this...
$(document).ready(function() {
$("a span").click(function() {
$(this).addClass("active");
$(this).parent().addClass("active");
});
});
and Css Style...
a.active { background:green; }
a.active span { background:lime; }
Ignoring internet explorer 6 and latter, how do I script the css to achieve the following results:
It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovered. Site link is Here
There is around 500 pages like that, so tweaking or adding javascript in the html is not feasible. I think CSS is the way to go to do this, but I've tried:
div.UpgradeI {display:none;}
div.UpgradeI:hover {display:inline;}
but it just hides everything and doesn't show the information when hovered. Anyway, if its not possible to achieve the same result using css only, please show me what code to add. Thanks!
Okay, it's possible to do this with CSS. First of all, those styles you suggest don't work because if it starts out with display:none, there is nothing to hover on for the next style to kick in.
I was able to add this to your site with Firebug:
div.UpgradeI,
div.UpgradeII,
div.UpgradeIII {
height:20px;
overflow:hidden;
}
div.UpgradeI:hover,
div.UpgradeII:hover,
div.UpgradeIII:hover {
height:auto;
}
That is the ugliest hack in history, but it achieves the desired effect without changing the HTML or adding Javascript. The paragraph below doesn't slide up because everything is positioned absolutely. If you start using float styles for everything else, though, it'll work.
Obviously, you can edit the height to show more/less of the div as necessary.
It would be hard to do it with only css. Because once you set the element style to display:none, it's not possible to catch the :hover event by the element.
I would suggest to use jquery to create a place holder element at the empty place. When the mouse hover over this element, then display the alternative "real" element.
you can try this plug in to see if you like it.
http://cherne.net/brian/resources/jquery.hoverIntent.html
UpgradeI table, UpgradeII table, UpgradeIII table {
display: none;
}
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child {
display: inline;
}
UpgradeI:hover table, UpgradeII:hover table, UpgradeIII:hover table {
display: inline;
}
By the way: Your markup is painfully.
This works on Firefox 4.0 (and probably Firefox 3.0, Chrome, Safari, etc; though I did not test on them). This definitely won't work on IE6, because IE6 does not support :hover on arbitrary element, :nth-child() selector, and the sibling selector (~):
div.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) {
display: none;
}
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * {
display: block;
}
I have a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!