How to get a hover/mouseover effect to stay selected? - javascript

I'm very much a beginner when it comes to Javascript and would appreciate any help you can give! I'm creating a feature box on my home page where three headlines will share one picture spot. I've found a script that changes the image when the headlines are rolled over, but it's hard to tell when the page opens that the first headline goes with the first picture. How do I get my hover style to appear already selected, and then stay with the last headline that was rolled over, so it's apparent what headline goes with the photo showing? Here's my example
Here's the code I'm using:
HOVER STYLE:
a.feature:hover {
font-size: 0.9em;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
color: #b0171f;
font-weight: bold;
background-image: url(../zimgart/nav/bgfeature.jpg);
background-repeat: no-repeat;
text-decoration: none;
padding: 5px 0 5px 10px;
display:block;
}
JAVASCRIPT:
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("photos/feature1.jpg",
"photos/feature2.jpg",
"photos/feature3.jpg")
</script>

Generally you should do such thing with JS code, simplest of course would be to use jQuery. With jQuery it would look like this:
$(document).ready(function(){
$('A.feature').mouseover(functiond(e){
$('A.feature').removeClass('a_hover');
$(this).addClass('a_hover');
$('#bigimage').attr('src',$(this).attr('rel')); // big image effect, just example
})
});
I assume that A-links have attribute rel='bigimageulr'.
To install jQuery just put in header:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Related

navigation bar not perform well in my Django project

I had created a horizontal navigation bar on top of my page. I use code on w3school and tryied javascript snippet from stackoverflow post I found months ago. I'm using Django. I met 2 issues I can't resolve or understand.
I paste my code here.
One navigation.html:
<div id="id_topnav" class="topnav">
Home
Help
Test
</div>
I got a style.css:
body {
margin: 10;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: red;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover:not(.active) {
background-color: blue;
color: black;
}
.topnav a:focus
{
background-color: pink;
}
In my home page,
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'main/style.css' %}">
{% include "myapp/navigation.html" %}
......and other lines below
myapp\static\main\style.css
My first issue is, when I changed colours in style.css, any colour in .topnav or .topnav a section, I didn't see any colour changes on any of my page. After modifying code, I do run py manage.py collectstatic to update the static folder and py manage.py runserver 127.0.0.1:8000 to restart my server. I don't see any change of colour. When I remove the <link rel="stylesheet" type="text/css" href="{% static 'main/style.css' %}"> it immediately changed back to no any style. But modifying some attribute of style.css, nothing happens. So I wonder, if the browser cache a style? or did I missed any important Django procedure?
My second issue is I want the tab on navigation bar keep a unique color when clicked. For example, originally background-color is green, when hover, yellow, blue after clicked. The colours used is not important, but I need a responsive change. I tried some javascript from some findings like below(snippet seems worked for someone but not for me):
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('#id_topnav').on('click','a', function ( e ) {
alert( "debug 1" )
e.preventDefault();
$(this).parents('#id_topnav').find('.active').removeClass('active').end().end().addClass('active');
$(activeTab).show();
});
$(document).ready(function() {
$('#id_topnav').click(function(event){
alert( "debug 2" )
var elementType = $("#id_topnav").find(":clicked").attr("href"))
$("#id_topnav").children('a').find(":selected").toggleClass('clicked');
});
});
</script>
I put this snippet in navigation.html after <div id="id_topnav" class="topnav">...</div>
Neither the alert( ) ever triggered. I didn't know why. Not sure if the two issues have any relation? I tried moving the JS code from navigation.html to home page which includes the navigation.html but also no effect.
Can I use JS or Jquery code in Django included html?
{% include "myapp/navigation.html" %}

How to open link in <a href> when click on parent <h3> element?

I have the problem when click in my title some post. Because I need set title have font-size and line-height is big. When user click between two line, they can't click. If hover in text, it's work.
I added a red arrow with 2 heads in the middle of the 2 lines (click on this to see image)
But user not hover exactly all time, so they will try click many time when start read some post in my website.
Code look like that:
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
I purposely to width 50% to have 2 line in sample code.
Have any method to fix that? User only hover anything on h3 tag, click on h3 tag and will open link in the a href.
So sorry if my first post is bad. I also research in Stackoverflow before ask this question but can't find the question same my case.
I prefer the simple method to resolve that. Thank you very much!!!
Since you cannot change your HTML structure, you can select all elements with the entry-title class using document.querySelectorAll and add click event handlers to all of them to click the child anchor tag.
document.querySelectorAll('.entry-title').forEach(title => title.addEventListener("click", function(e){
this.querySelector('a').click();
}));
var h3 = document.querySelector(".entry-title");
h3.addEventListener("click", function () {
var a = h3.getElementsByTagName('a')[0];
a.click();
});
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
cursor:pointer;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
Update:
Use addEventListener on <h3> and simulate click(); on <a> link
Your example could be:
var h3 = document.getElementsByClassName("entry-title");
for (var i = 0; i < h3.length; i++) {
var a = h3[i].getElementsByTagName("a")[0];
h3[i].addEventListener("click", function() {
a.click();
});
}
.entry-title {
font-family: Arial, Helvetica, sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
Adding padding might help or put everything in a div and add an Eventlistner to the div
div = document.getElementbyid('divid')
div.addEventlistner('click',function(e){
window.location.assign('url')
})
sorry for poor spellings
Try enclosing the heading itself within the a tags.

Dynamic "Terminal" Style Text Box

I am trying to create a text box that is styled like a terminal window, On the bottom where you would usually type, right above that I would like some words that if you click on a word it would then print a specific paragraph into the "Terminal" Window.
I am using this for a personal website about coding. I would like to be able to click on the bar below on the "About" button and have it print an "About Coding" paragraph one letter at a time, kinda like you see in old 90s movies.
I need a place to start, maybe what the box should be coded in and or what that kind of thing is called. I cant for the life of me remember.
scoured the internet trying to find something similar and didnt come up with anything.
None to show yet.
There are a few ways you can approach this project. It is all based on what your end goal is (not just for the Terminal window page, but for the whole website in general). If this is something really small that doesn’t need for any data to persist (like having users, posts and etc) - you can go as simple as plain Javascript + HTML. You can also get really fancy with it and pick a front-end framework like Vue.js, React.js, Angular.js and etc. There are many different tools that you can use (here is a list from GitHub: https://github.com/collections/front-end-javascript-frameworks).
However, if we are looking to specifically tackle the task at hand - I would recommend using plain old Javascript with HTML.
Here is a small start for you, hope it helps (please see / run the snippet).
function kenobi() {
const customContent = document.createElement('div');
customContent.innerHTML = 'Hello there, General Kenobi!';
customContent.id = 'custom-content';
const referenceNode = document.querySelector('#you-are-a-bold-one');
referenceNode.parentNode.insertBefore(customContent, referenceNode.nextSibling);
}
.terminal {
max-width: 400px;
height: 150px;
padding: 8px;
font-family: Arial, sans-serif;
font-size: 14px;
border: 1px solid;
}
.wrapper {
display: flex;
}
#custom-content {
max-width: 250px;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: grey; }
}
<html>
<head>
<meta charset="UTF-8">
<title>Terminal Window</title>
</head>
<body>
<div class="terminal">
<div>Last login: Sun May 19 23:31:48 on ttys000</div>
<div class="wrapper">
<div class="intro" id="you-are-a-bold-one">~ $ </div>
</div>
</div>
<button class="about-button" onclick="kenobi()">About</button>
</body>
</html>

Setting background color with JavaScript breaks the CSS hover behavior

I'm trying to create a menu where the currently selected (clicked) element has a different background color than the other elements (I'm trying to achieve this using JavaScript). I also use the CSS :hover pseudoclass to make the hovered element stand out by highlighting it. However, I have encountered a strange problem: when I set the background color of any element with JavaScript, its CSS hover behavior no longer works. That is, I can't highlight the element by hovering it anymore. I have checked that in Firefox and Chromium. This is the case for both jQuery and plain JavaScript.
The code is below. I have simplified it a lot to narrow down the problem. First try hovering any of the menu items, then click the "Set background color" link and hover one of the menu elements again. What I expect is the element getting red (#f00) when hovered, regardless of whether the "Set background color" button was clicked or not. For jsfiddle links, go to the bottom.
Vanilla JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p#links a {
display: inline-block;
width: 80px;
height: 22px;
line-height: 22px;
background-color: #00f;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
}
p#links a:hover {
background-color: #f00;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
Link 1
Link 2
Link 3
Link 4
</p>
Set background color
<script>
document.getElementById('setbgcolor').onclick = function() {
var p = document.getElementById('links');
var elements = p.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++)
elements[i].style.backgroundColor = '#ff0';
};
</script>
</body>
</html>
jQuery:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.0.js"></script>
<style>
p#links a {
display: inline-block;
width: 80px;
height: 22px;
line-height: 22px;
background-color: #00f;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
}
p#links a:hover {
background-color: #f00;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
Link 1
Link 2
Link 3
Link 4
</p>
Set background color
<script>
$('a#setbgcolor').click(function() {
$('p#links a').css('background-color', '#ff0');
});
</script>
</body>
</html>
And here are jsfiddle.net links for the purpose of convenience:
Pure JavaScript: http://jsfiddle.net/5yQFM/1/
jQuery: http://jsfiddle.net/5yQFM/
The jQuery css() method maps onto the style property which maps onto the style attribute.
Rules inside a style attribute are more specific then rules in a stylesheet, so will always come after them in the cascade.
Instead of altering the CSS on the element directly, alter it by changing the classes the element belongs to and having a pre-prepared stylesheet.
you need to use !important on hover, basically it will increase its priority.
Try this,
p#links a:hover {
background-color: #f00 !important;
}
DEMO
As Quentin said it looks like a dirty one, so in that situation we can make use of the class priority concepts.
HTML:
<a class='normal' href="#">Link 1</a>
<a class='normal' href="#">Link 1</a>
CSS:
.normal { background-color: blue; }
.abnormal{ background-color: yellow; }
.normal:hover { background-color: #f00; }
JS:
$('p#links a').attr('class', 'abnormal normal');
DEMO Non-Dirty one
How about keeping the style in CSS and not in Javascript, by adding classes ?
so the line :
elements[i].style.backgroundColor = '#ff0';
Change to
elements[i].className = 'myClassForBackgrounds';
or in the jQ version
$('p#links a').css('background-color', '#ff0');
to :
$('p#links a').addClass('myClassForBackgrounds');
That way you can set your :hover as you would normally
#links a:hover, .myClassForBackgrounds:hover { background-color:#ff0; }
Just for a more simple answer, in able to just re-enable css rules just have it toggle between the color and "", so
document.getElementById("id").style.backgroundColor = "rgb(255, 125, 15)";
would be if the element wasn't already colored via javascript.
Now, if your element was already colored the code would look like this:
document.getElementById("id").style.backgroundColor = "";
That re-enables CSS so then your selectors will work.
I encountered the same problem and solved it by doing this:
I set a onmouseover event to change the background color to what the hover color is.
I set a onmouseout event to change the background color to the default color.
This way I have set a hover event with pure javascript

Displaying two dynamically added elements in different rows

I've an HTML page like following:
<html>
<body>
<div id="emaildiv" class="main" style="width:150px;height:80px;"></div>
</body>
</html>
I want to add a DIV with a TEXT and BUTTON in to it dynamically. All these are made by using the following javascript.
function newEmailForContact() {
var parentDiv = document.getElementById('emaildiv');
var newEmailDiv = document.createElement('div');
newEmailDiv.setAttribute('id','newEmailDiv');
newEmailDiv.setAttribute('style', 'display:table;');
var newEmail = document.createElement('INPUT');
newEmail.setAttribute('type','text');
newEmail.setAttribute('name','newEmail');
newEmail.setAttribute('class', 'textfield_addemail');
newEmail.setAttribute('id','newEmail');
var addEmailBtn = document.createElement('INPUT');
addEmailBtn.setAttribute('type','button');
addEmailBtn.setAttribute('name','addEmail');
addEmailBtn.setAttribute('id','addEmail');
addEmailBtn.setAttribute('value', 'Add');
newEmailDiv.appendChild(newEmail);
newEmailDiv.appendChild(addEmailBtn);
parentDiv.appendChild(newEmailDiv);
}
But the TEXT and Button are displayed in two different rows.
EDIT :-
CSS class :-
.textfield_addemail {
border-width: 1px;
border-style: solid;
border-color: #999999;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
width: 120px;
height: 15px;
}
I want to display both in same row. Any solution?
The problem is your initial <div> isn't wide enough at 150px, just increase the size a bit, like this:
<div id="emaildiv" class="main" style="width:250px;height:80px;"></div>​
You can see a working/updated example with only this change here.
Leave out the
newEmailDiv.setAttribute('style', 'display:table;');
Then your span will be displayed as inline and your button should appear next to it

Categories