OnClick style change - javascript

I'm trying to retain the hover style state on my links when I click on them, kind of like a tabbing effect. It doesn't seem to be working, hoping someone can help me with it.
CSS:
.nav {
position: absolute;
z-index: 1000;
font-family: Asap;
right: 100px;
top: 70px;
}
.nav a, .nav a:active, .nav a:visited {
font-family: 'Asap', sans-serif;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: black 0.1em 0.1em 0.2em;
}
.nav a:hover {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
.nav2 a {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
Script:
$('div.nav > a').click(function(){
$(this).parent().removeClass('nav').addClass('nav2');
});
HTML:
<div class="nav" onclick="javascript:showlayer('myName')">
<span class="btn1">Design </span>
<span class="btn2">Neighbourhood
</span>
<span class="btn3">Media </span>
<span class="btn4">Developer </span>
<span class="btn5">Contact </span>
<br><br><br><br><br><br><br><br><br><br>
</div>

You could just do something purely Javascript by declaring a different style onClick.
var change = document.getElementById("Link Id"); //Define the link in a variable
change.onClick=function() { //Activate the function when clicked
change.style.fontFamily=("Asap");
change.style.color=("#fff");
change.style.fontSize=("12px");
change.style.textDecoration=("none"); //Change the link attributes
change.style.textTransform=("uppercase");
change.style.letterSpacing=("1px");
change.style.borderTop=("2px solid #fff");
change.style.paddingTop= ("5px");
}
This should change the link style to the hover style after you click the link. Just make sure you assign your link an id. Make sure you know basic Javascript like the src tag to call it:
<script type = "text/javascript" src = "externaljavascript.js"></script>
And don't forget to refrain from using the tags in the external script.

Related

Sliding Panel Open click

.destination {
width: 100%;
height: 130vh;
background-color: #f8f8f8;
margin: 0 auto;
}
.destination-inner {
margin: 0 auto;
padding: 100px 0px 0 0;
}
.destination-inner h1 {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 29px;
color: #555555;
text-transform: uppercase;
text-align: center;
}
.destination-inner h1 span {
font-weight: 600;
}
.destination-inner h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 16px;
color: #555555;
text-transform: uppercase;
text-align: center;
padding-bottom: 25px;
}
.destination-inner h3 {
list-style: none;
color: #fff;
font-family: 'Roboto', sans-serif;
vertical-align: middle;
font-size: 28px;
font-weight: 300;
text-transform: uppercase;
line-height: 1.4;
padding-top: 80px;
}
.destination-inner p {
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 1.7;
color: #555555;
text-align: center;
margin-bottom: 50px;
}
.destination-inner hr {
width: 14%;
color: #fe0103;
margin-top: 50px;
margin-bottom: 50px;
}
.destination-inner ul {
max-width:90%;
padding: 0px 30px;
margin: 0 auto;
text-align: center;
padding:10px 25px;
cursor: pointer;
list-style: none;
}
.destination-inner li {
background-color: #32374a;
display: inline-block;
width: 250px;
height: 320px;
cursor: pointer;
transition: all 0.3s ease 0s;
padding: 70px 40px;
margin-right: 15px;
list-style: none;
}
.destination-inner li a {
text-decoration: none;
}
.destination-inner li:hover {
background-color: #393F55;
transition: all 0.3s ease 0s;
}
<section class="destination" id="travels">
<div class="destination-inner">
<h2>STEP 01</h2>
<h1>Choose your <span>Destination</span></h1>
<hr>
<p>They are innovative and carefully researched and curated.<br> They guides are also hand picked, and are highly experienced, very often with a special expertise.<br> The vehicles are able to be adapted to more active days of touring.</p>
<ul data-grid="Grid 3">
<li>
<a href="#">
<h3>City & <br>Table Mountain</h3>
</a>
</li>
<li>
<a href="#">
<h3>The Cape <br>Peninsula</h3>
</a>
</li>
<li>
<a href="#">
<h3>The <br>Winelands</h3>
</a>
</li>
<li>
<a href="#">
<h3>The <br>Overberg</h3>
</a>
</li>
</ul>
</div>
</section>
I trust we are all good. I am trying to create a content sliding effect for the section of blocks(refer to img attached).
Is it possible to create something where, when a user clicks on any block out of the 4, a new section of 4 blocks slides in to replace the current block?
I'm still a baby when it comes to JavaScript and I have been looking for tuts but no luck. I'd really appreciate some help.
Thanks in advance.
I presume you are trying to achieve a wizard kind of feature here, like from step 1 to step 2 to step 3 and so on and show some results in the end. You may also want to go back and forth with these steps.
jQuery Smart Wizard - http://techlaboratory.net/jquery-smartwizard is all you need.
You can easily customize this plugin as per your need. For example, you can go the next step when user clicks on any of the four cards. All you have to do is to simply write this:
$('#smartwizard').smartWizard("next");
You can write this code when we click on any of the four cards. So you can provide same class names to all four cards and use above code on clicking.
For example:
$(".card").click(function() { $('#smartwizard').smartWizard("next"); });
This plugin will surely help you and will take most of the overhead, like going back one step and making changes.
If you need any help with the implementation, please reach out, however, the site has super helpful documentation.
Please note that there are plenty of other plugins also and we can also write this code on our own, but I really like this one.
Specifics: The animation you wanted to achieve here, like clicking on one card will bring 4 new cards will happen with ease here.
You just have to write the HTML as mentioned on the plugin site.
Best,
Sumit

Anchor Tag is Clickable Across Width of Screen

I am working on a small app and have found a strange bug. I am currently using anchor tags to represent buttons in my app, I could change these to actual buttons instead, but I've decided to stick with anchors for now.
However, I've noticed that the anchor tags are clickable across the entire width of the screen. Could someone please point out why this is occurring? I am assuming it is something wrong with my CSS.
Please see below for an example.
#commentList {
list-style-type: none;
padding: 0;
margin: 0;
display:block;
}
#commentList li a {
width: 364px;
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
<ul id="commentList">
<li onclick=functionA() title="Activate function A."><a href="#" >Function A</a></li>
<li onclick=functionB() title="Activate function B."><a href="#" >Function B</a></li>
<li onclick=functionC() title="Activate function B."><a href="#" >Function C</a></li>
</ul>
That's because your onclick=functionA() is on the li tag, not on the anchor tag, and the lis span the whole width since they are block elements without a width setting.
I think this is your issue:
Change:
#commentList li a {
width: 364px;
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
To:
#commentList li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
#commentList li {
width: 364px;
}
The width is being applied to the <a> tag, not the <li>. You can make it so the width of the <li> is still 346px and still have the <a> tag work correctly within it.
See the JSFiddle: https://jsfiddle.net/d4g8f59h/
On the a tag, instead of display: block; do display: inline-block;

Why hover selector doesn't work with clases?

I have set the styles for links (active, link, etc), but then I want to do a button with totally different styles so I tried something like this:
.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}
.r-button:hover { cursor: selector; color:ivory;}
<a class="r-button" onclick="document.getElementById('menu').style.display='block'"> Click button </a>
But then I realized that :hover doesn't work with clases. Why is that? What others chances do I have to do the same?
You will need to either REMOVE !important from your color in .r-button or add it to .r-button:hover 's color
.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}
.r-button:hover { cursor: selector; color:ivory !important;}
<a class="r-button" onclick="document.getElementById('menu').style.display='block'"> Click button </a>
It does, your color: black !important; is overriding the hover and that selector isn't a valid cursor. Try pointer on hover.
.r-button:hover { cursor: pointer; }
Your :hover pseudo element was being overwritten with !important. Avoid using !important rules within your default class.
Bonus tip! Remove cursor: pointer for anchor tags, and simply have an empty href="#" attribute for better accessibility.
.r-button {
padding: 4px 52px;
display: inline-block;
text-align: center;
font-size: 16px;
text-decoration: none;
color: black;
border-radius: 12px;
border: 1px inset #282c37;
}
.r-button:hover {
background-color: #282c37;
color: ivory;
}
<a class="r-button" href="#" onclick="document.getElementById('menu').style.display='block'">Click button</a>

Change color of multiple menu items when one is hovered

See my CodePen
My menu has 4 links. When you enter the website I want them all to be Black.
When you hover Link1 - then Link2, 3 and 4 should become transparent with Black outline, while Link1 should change color to Red.
Same with Link2 - when you hover Link2, it should become Red, while Links 1, 3 and 4 should be transparent with Black outline. Etc.
When none of them are hovered - they go Black again.
For transparency I use this code:
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
Is it possible to set this up in CSS or do I have to use JS? If so, how to do it?
Here's the code:
HTML:
<div class="main">
<a class="hover_link l1" href="">Link1</a>
/
<a class="hover_link l2" href="">Link2</a>
/
<a class="hover_link l3" href="">Link3</a>
/
<a class="hover_link l4" href="">Link4</a>
</div>
And CSS:
a {
text-decoration:none;
position: relative;
}
.main {
position: fixed;
text-align: center;
width: 54%;
font-size: 2.5vw;
}
.hover_link, .l1, .l2, .l3, .l4 {
text-decoration: none;
font-family: 'Montserrat';
font-weight:900;
color: black;
}
.hover_link:hover {
text-decoration: none;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: red;
-webkit-text-stroke-color: red;
}
I tried using this:
a.l1:hover > a.l2, a.l3, a.l4 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
But doesn't work -_-'
Switch the primary hover to the wrapping div.
In other words, the hover kicks in to change all links when the .main is hovered BUT an additional style is added when the link itself is hovered.
a {
text-decoration: none;
position: relative;
}
.main {
position: fixed;
text-align: center;
width: 54%;
font-size: 24px;
/* for demo purposes */
}
.hover_link {
text-decoration: none;
font-family: 'Montserrat';
font-weight: 900;
color: black;
}
.main:hover .hover_link {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.main:hover .hover_link:hover {
text-decoration: none;
color: red;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: red;
}
<div class="main">
<a class="hover_link l1" href="">Link1</a> /
<a class="hover_link l2" href="">Link2</a> /
<a class="hover_link l3" href="">Link3</a> /
<a class="hover_link l4" href="">Link4</a>
</div>
You can try something like this by using the hover on the main container:
a {
text-decoration: none;
position: relative;
}
.main {
position: fixed;
text-align: center;
width: 54%;
font-size: 2.5vw;
}
.hover_link {
text-decoration: none;
font-family: 'Montserrat';
font-weight: 900;
color: black;
}
.main:hover a {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
a.hover_link:hover {
text-decoration: none;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: red;
-webkit-text-stroke-color: red;
}
<div class="main">
<a class="hover_link" href="">Link1</a> /
<a class="hover_link" href="">Link2</a> /
<a class="hover_link" href="">Link3</a> /
<a class="hover_link" href="">Link4</a>
</div>

Highlight current menu item asp.net using jquery

I want to highlight my current menu item in asp.net with jquery but I don't know why it is not working. Here is my code:
Site.css:
#menu {
background: #292929;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0em 2em;
line-height: 80px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 1em;
font-weight: 700;
color: white;
}
#menu .current_page_item a {
background: #01A9DC;
color: #FFF;
}
#menu a:hover {
text-decoration: none;
background: #01A9DC;
color: #FFF;
}
#menu a:active {
background: #01A9DC;
color: #FFF;
}
Site.Master:
<div id="menu" class="container">
<ul>
<li>Home</li>
<li>Softcare</li>
<li>Softlearn</li>
<li>Software</li>
</ul>
</div>
jQuery (1.7.1) inside <head>:
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$("menu ul li a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('current_page_item');
}
});
I also tried with javascript and it didn't work out well either, i think jquery is the best at doing this job, any advice is appreciated.
This is the flawless way I have always used jQuery to highlight the current menu item
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});

Categories