Javascript Change class does not behave properly - javascript

I've used a javascript to change the image on a menu list item (from css class)when its clicked.
Its supposed to change from "menu_grey" to "menu_red". It does happen but its momentarily switched back to the same class. This is what I have in HTML:
<li %WELCOME_ACTIVE%><a id = "menuClicked" class='menuHome' href='%AuthProgram%'>%lang("lang_customer_framework_home")%</a>
<script>
document.getElementById("menuClicked").onclick=function() {
var className = document.getElementById("menuClicked").className
document.getElementById("menuClicked").className = "menuClicked"
};
</script>
</li>
As this is an alteration of the design in a pre-developed website and the layout of the menu is defined in CSS, i dont want to make a new menu and design as i would then risk to destroy rest of the design. The CSS class looks like this:
#menu li a.menuHome
{
background: url('../graphics/SevenCustomer/ikoner/hjem_gra.jpg') no-repeat top center;
display: block;
padding-top: 44px;
}
And for menuClicked:
#menu li a.menuClicked
{
background: url('../graphics/SevenCustomer/ikoner/HJEM_rod.jpg') no-repeat top center;
display: block;
padding-top: 44px;
}
So the question is:
How can I make the image stay "red" after clicking home ?
Suggestions are appreciated :)

The page navigates away, you would need to set it on the serverside or on the page that loads. The next page has no clue that you added a class to it. It does not care since it is a brand new page.

Just stop the event from firing when someone clicks on the link. There are several ways to do this, here's a few suggestions:
how to stop page redirect

Related

Change page background when hovering over a link

I want to have two different links and when hovering over one it changes the entire PAGE background to a different background-image-url. Then when I hover over the second link it changes the background-image-url to another picture. Is this possible? I am using Angular, I was thinking at first I could do this in css but I now think something more will be required. Any guidance would be greatly appreciated.
It won't be possible with pure CSS because selectors are unable to ascend.
What you're trying to achieve can be easily done though. Just attach hover events to the links and in the event handlers, add a certain CSS class to the page. And then define the styles for that class of course.
To add the class, what you need to do is set a state value to a certain value and in the page element, add *ngClass="{bgLink1: hovered === 'link1'}" or something like that. You get the idea.
<!DOCTYPE html>
<html>
<body>
</body>
<style>
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#link1 {
margin: 5vw;
}
#link2 {
margin: 5vw;
}
#link1:hover body {
background: url('');/*any url you want for the picture*/
}
#link2:hover body {
background: url('');/*another url you want for the other picture*/
}
</style>
</html>
I really hope I could help you, if not it wouldn't hurt to write the question another time but with code or something so I can understand what you want

Calling a function on bootstrap modal open - js additional code

its not dublicated question because I didnt understand the smilar
question's answer.may I can delete after solved my question, if the answer so easy.
When bootstrap 3 modal is opened, my mega menu appear upon it.to solve this, while bootstrap modals are opened, I must reduce z-index of mega menu.mega menu's z-index is maximum now for all time.
I found this question:
Calling a function on bootstrap modal open
it says:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
for bootstap 3.
how can I write this code with jquery or javasicript?
edit: to give specific request, I want to determine bootstrap class to use it instead of #code word and then, write changing z-index value of a spesific class via jquery.
https://resimli.yedek.deniz-tasarim.site/
website is this.
bootstrap modals open with sign up/login buttons on header. ( top-right )
I am foreign to bootstap 3 and there are many classes for modals.So, it confused me.
Your menu overlaps the modal due to the default maximum z-index.
Here's what the css rules for the menu look like now:
#wp-megamenu-header-menu {
z-index: 9999; <=== /*the problem is here*/
text-align: left;
height: 90px;
background-color: #fff;
padding-top: 20px;
padding-right: -20px;
padding-bottom: 40px;
padding-left: 0;
}
And this is most likely written by you:
.wp-megamenu-wrap {
z-index: 99999;
}
To solve this problem, it is sufficient to override the z-index with the !important rule. Insert this rule into your css:
#wp-megamenu-header-menu {
z-index: 1000!important;
}
And your overlap problem will go away!

jQuery Traversing and simple code?

Okay, before I ask this question. Let me explain my goal: I want to write as little code as possible, and still be able to have tons of functionality at the same time. I have coined this as 'beautiful code' to myself and colleagues.
Here's the problem: I want to click a box, and a panel to fade in with the desired content based on which box I clicked. Except that I cant use two classes and cannot re-use id's.
Here's the code: http://jsfiddle.net/2Yr67/
$('.maingrid').click(function(){
//'maingrid' fade out
//'panel' fade in with proper content
});
I had two ideas that would please me.
A) Have one panel fade in, and content fill into the panel based on which 'maingrid' box that was 'click'ed
B) Have a specific panel with the content fade in, based on which 'maingrid' was selected
I'm not asking for you to do it for me, simply push me towards the syntax needed to do what I want
Thanks in advance!
The first thing to do is to move your panel HTML elements closer to the maingrid elements. This allows you to hide/show the correct elements in order. Having all of the panels in their own separate element causes you to do DOM manipulation should shouldn't need to do. For simplicity, I put each panel right after the maingrid element that it was associated with it.
HTML Structure
<div class=".mainContainer">
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
</div>
I added the panel class to have the same CSS as maingrid, as well as make it invisible at the start:
.maingrid, .panel {
height: 345px;
width: 345px;
float: left;
/* [disabled]background-color: #000; */
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
overflow: hidden;
}
.panel{
display:none;
color:white;
}
This will fade out the current element clicked and fade in the next panel element.
$('.maingrid').click(function(){
var $that = $(this);
$(this).fadeOut(function(){ //This will wait until the fadeOut is done before attempting to fadeIn.
$that.next().fadeIn();
});
});
$('.panel').click(function(){
var $that = $(this);
$(this).fadeOut(function(){
$that.prev().fadeIn();
});
});
There also seems to be a bug where the hover does not show the text on the first hover event.
JSFiddle: http://jsfiddle.net/mDJfE/

making background inactive when a button is pressed

When i click a user name on twitter background it becomes inactive and dark.just like that:
I want to make my website's background inactive when a button is pressed, how can i do that?
Note: and i want to now which solution should i use make a box appear/disappear middle of my site when a button is pressed?i am doig something like this.
//in css
.visible{
display: inline;
}
.hidden {
display: none;
}
//in jquery
$("#div1").click(function() {
$('#div2').removeClass("visible").addClass("hidden");
}
This is called a lightbox.
First hit should make you happy: https://www.google.nl/search?q=lightbox
You are trying to build lightbox. Just show fullscreen div with semi-transparent background color for this.
Simple solution:
CSS:
.lightbox {
display:none;
position: absolute;
z-index:10;
background-color: rgba(255,255,255,0.7);
}
HTML:
Show lightbox
<div class="lightbox"></div>
</body>
JQuery:
$("a").on("click",function(){
$(".lightbox").css({'width':$(document).width()+'px','height':$(document).height()+'px'});
$(".lightbox").show();
return false;
});

Link (or a linkable DIV?) with background image + highlighting

I see this in Facebook (also Google), but can't figure out how to do it. I took a screenshot of the Facebook nav bar below,
Several questions,
It doesn't seem like this is highlighting the link only - i.e., not doing this through modifying the <a> tag alone - a:hover, etc. The entire element (probably a <li>) is being highlighted - does this mean the entire <li> element itself is a link? Or maybe they're just putting a lot of spaces (e.g., ) in front of the link text? Doesn't seem like they're doing that either.... How is this done?
How do you do a highlight AND a background image? Seems like the background color overrides the background image...?
How do you get the link to know where you are? Is this done through JavsScript, where when I click on a link, I modify its CSS to stay highlighted, and remove all the permanent highlights from the other links in the navbar? I could probably figure out how to do this, just wondering if this is the only way to do it.
Thanks a million for answering my newbie questions!
You can specify different CSS for an LINK element when on hover - it will have an effect as you have described. LIVE EXAMPLE
E.G.
a { background: #fff img1.png no-reapet left top; font-weight: normal}
a:hover { background: #000 img2.png no-reapet left top; font-weight: bold}
In this example we have changed background color, background image and font weight when the element is on :hover.
Q1: If you have an a href inside the li and you add display:block to the a href - a href will get as big as the parrent li. Which than can look as li is an a href
Also, if you add display:block to the a href it can serve as a condtainer for spans img em's etc.. elements - creating one big link which can looks like a div. e.g here you have a link a href which contains desc + img.
Q2: When you specify both - background image and background color for the same element - background image WILL always be on TOP.
Please note that:
a { background-color: #fff; background-image: url(img1.png); background-repeat: no-repeat; background-position: top left}
is the same as:
a { background: #fff url(img1.png) no-repeat top left}
Q3: You can add a class to the clicked element through JS to stay highlighet - but unless you save this value in the DB it will be lost when you reload the page.
Second option is that you can use javascript / jQuery to match URL of the links with current URL and mark matched element (see this example - jQuery).
1) here is an example on how you can achieve what you are looking for.
http://jsfiddle.net/UKna2/1/
CSS
li:hover {
background-color: lightblue;
}
li a {
display: block;
width: 100%;
}
HTML
<ol>
<li>menu item 1</li>
<li>menu item 2</li>
</ol>
2) All they probably do is set an image icon to the list item instead of the standard numbering or bullet. Read up on this : http://www.w3schools.com/cssref/pr_list-style-image.asp

Categories