img:focus doesn't stay focus in CSS - javascript

result
I want to make the image stay clicked.
I am using two images for each icon. one is when is not clicked. another is when is clicked. hover is working fine. but focus is not working at all.
i don't see any errors or mistakes. help me please!
this is body
body{
width:350px;
}
img {
float:left;
width:60px;
height:50px;
}
#hardy{
float:right;
}
.category{
position: fixed;
padding: 2em;
left: 0;
top: 0;
background-color:white; /*Grey*/
padding:13px;
height:57px;
width:100%;
display:inline-block;
}
.img-top {
display:none;
z-index:99;
}
#restaurant:hover .img-top{
display: inline;
}
#restaurant:hover .img-bottom{
display:none;
}
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
#hotel:hover .img-top{
display: inline;
}
#hotel:hover .img-bottom{
display:none;
}
#pub:hover .img-top{
display: inline;
}
#pub:hover .img-bottom{
display:none;
}
#park:hover .img-top{
display: inline;
}
#park:hover .img-bottom{
display:none;
}
#tourism:hover .img-top{
display: inline;
}
#tourism:hover .img-bottom{
display:none;
}
<div class="listView">
<div class="category">
<span id="restaurant">
<img src="./resources/icons/category/restaurant_list_icon.png" alt="restaurant" title="restaurant" class="img-bottom">
<img src="./resources/icons/category/restaurant_list_selected_icon.png" alt="restaurant" title="restaurant" class="img-top">
</span>
<span id="hotel">
<img src="./resources/icons/category/hotel_list_icon.png" alt="hotel" title="hotel" class="img-bottom">
<img src="./resources/icons/category/hotel_list_selected_icon.png" alt="hotel" title="hotel" class="img-top">
</span>
<span id="pub">
<img src="./resources/icons/category/pub_list_icon.png" alt="pub" title="pub" class="img-bottom">
<img src="./resources/icons/category/pub_list_selected_icon.png" alt="pub" title="pub" class="img-top">
</span>
<span id="tourism">
<img src="./resources/icons/category/tourism_list_icon.png" alt="tourism" title="tourism" class="img-bottom">
<img src="./resources/icons/category/tourism_list_selected_icon.png" alt="tourism" title="tourism" class="img-top">
</span>
<span id="park">
<img src="./resources/icons/category/park_list_icon.png" alt="park" title="park" class="img-bottom">
<img src="./resources/icons/category/park_list_selected_icon.png" alt="park" title="park" class="img-top">
</span>
</div>
</div>
it doesn't seem like focus is working.
only hover is working. I've looked for the answer through googld but can't find.
can anyone have the answer why focus is not working? thank you!!!

Wrong Style You Added
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
Current Style is
#restaurant .img-top:focus {
display: inline;
}
#restaurant .img-bottom:focus {
display: none;
}
#restaurant ids main Div and .img-bottom is sub img tag

Hover and Click
Well the focus pseudo class wont work, because the hover pseudo class changes the state of the element when the cursor hovers away.
So in order to achieve this task we can create a custom class ( selected in the example below -- run the snippet ) using jquery and add or remove it on click events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>peedikayil</title>
<style>
img{ width:200px; overflow:hidden; }
.clickme:hover #item1{display: inline;}
.clickme:hover #item2{display: none;}
.clickme #item1{display:none;}
.clickme #item2{display:inline;}
.selected #item1{display:inline;}
.selected #item2{display:none;}
</style>
</head>
<body>
<a href="" class="clickme">
<span id="item1">
<img src="http://www.clker.com/cliparts/3/7/7/f/1268838238959637666link-zelda_red_mini-hi.png" alt="restaurant" >
</span>
<span id="item2">
<img src="https://static.giantbomb.com/uploads/scale_small/0/5128/318633-zww_link11.jpg" alt="restaurant" >
</span>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var clicked = false;
$('.clickme').on('click',function(e){
e.preventDefault();
this.clicked = !(this.clicked);
if(this.clicked){
$('.clickme').addClass('selected');
}else{
$('.clickme').removeClass('selected');
}
});
});
</script>
</body>
</html>

Use javascript instead. Here's a sample implementation for you. I've used text instead of image since I don't have images here, just replace those with your images.
HTML code should be like this
<ul>
<li>Item 1 <!--add your original image here--></li>
<li>Item 2 <!--add your original image here--> </li>
</ul>
CSS
.selected#item1{color:#f00; /*you can use background: url(yourimagepath); here instead of color */}
.selected#item2{color:#0f0; /*you can use background: url(yourimagepath); here instead of color */}
JS
$('.clickme').on('click',function(e){
e.preventDefault();
$('.clickme').removeClass('selected');
$(this).addClass('selected');
});
Here's a working sample in jsfiddle

Related

On div hover, display a new div on a third one

Say I have 2 divs, positioned side by side (with some intermediate elements between them): A (left) and B(right). When hovering over B, I wish to have another div(C) appear over the left one (A).
I know how to toggle the display none/block properties but I don't know how to write the condition so the div C can appear on another div, not the one that we're hovering over.
Can this be done?
<div className="A">
<h2>About me</h2>
</div>
<div className="B">
<div>
<Link className="link1-to-project" to="/project1">
<h2>Project 1</h2>
<div className="C"></div>
</div>
codeply demo here
Html
<div id="a">
Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>
css
#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}
Javascript
document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}
function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}
UPDATE:
https://jsfiddle.net/mq5bza81/1/
https://jsfiddle.net/mq5bza81/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.wrapper {
position: relative;
}
.b:hover+.c {
display: block;
}
.c {
display: none;
position: absolute;
top: 0;
}
</style>
<div class="wrapper">
<div class="a">AAA</div>
<div class="b">BBB</div>
<div class="c">CCC</div>
</div>
</body>
</html>

jquery .css script doesn't work

Morning,
I'm trying to display a div onmouseover. I created a function but i don't know what is wrong. Could you help me please.
The HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title> PHOTOGALLERY</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-
1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
</script>
<script>
function show_img_container() {
$("#image_container").css("display", "block");
}
</script>
</head>
<body>
<div id="div_container">
<div id="div_image" class="cycle-slideshow">
<img src="images/2.jpg" style="height:100%; width:100%">
<img src="images/3.jpg" style="height:100%; width:100%">
<img src="images/4.jpg" style="height:100%; width:100%">
<img src="images/5.jpg" style="height:100%; width:100%">
</div>
<div id="image_container" onmouseover="show_img_container()"></div>
</div>
</body>
</html>
In the css file i have a image_container id where the attribute display is set to 'none';
If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
To explain further:
Since you're using display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place.
Hope this helps!
I'll answer based on what OP has provided. wrap the #image_container with a div that contains the function, then it should work.
And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout
function show_img_container() {
$("#image_container").css("display", "block");
}
function hide_img_container() {
$("#image_container").css("display", "none");
}
#image_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
HOVER ME!!
<div id="image_container">IM HIDDEN!!!</div>
</div>
In the css file i have a image_container id where the attribute display is set to 'none';
It is not possible to hover a none blocked element.
You can use the opacity attribute to hide your div.
div {
opacity: 0;
}
div:hover {
opacity: 1;
}
<div>Stuff shown on hover</div>
You cant hover on div if its display is sets to none.
Ok. I know the problem. In the css stylesheet i had this:
#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;
}
#image_container:hover {
opacity: 1;
}
If i delete the transition attribute it works:`
Could you show me why?

How do I program an HTML page to update text imported from a text file on button click?

I'm been having a lot of trouble figuring out a way to update the text in a section without having to reload the page. What I would like the code to do is update the text and a picture in a section (id="section2" below) when you click on one of the tabs.
What I want the page to do when you click on one of the tabs is to load text (and in the future a .jpg too) from a local .txt file. As of right now, the changeText function updates the text but only when you manually type in the text.
From my code below this works:
$('#section-text').html("test of text1");
but what I would like to do would be to load text in from a .txt file called "text1.txt"
$('#section-text').html("text1.txt");
I'm just starting to venture into the web programming so I have very little experience with JavaScript and JQuery so most of the stuff that I've shown below is trial and error from other sites. I've tried many other methods that I've found online but with very little success. So far this is the closest I've got to my ideal solution, but I find if I just copy and paste my text it loses formatting.
Any help would be greatly appreciated. And if people have any suggestions on cleaning up some of the code it would also be very welcome.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Test Page">
<title>Test Page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function changeText(text){
if (text == 'Example 1'){
$('#section-text').html("test of text1");
$('#section-pic').html("images/slide1.jpg");
}
if (text == 'Example 2'){
$('#section-text').html("Change the text");
$('#section-pic').html("images/slide2.jpg");
}
if (text == 'Example 3'){
$('#section-text').html("Something new here");
$('#section-pic').html("images/slide3.jpg");
}
}
</script>
</head>
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li id="Example 1" onClick="changeText('Example 1');"><a>Example 1</a></li>
<li id="Example 2" onClick="changeText('Example 2');"><a>Example 2</a></li>
<li id="Example 3" onClick="changeText('Example 3');"><a>Example 3</a></li>
</ul>
</div>
<div id="section2" class="section2" align="center">
<div id="section-text" class="section-text">
<iframe src="des/text1.txt" style="overflow:hidden" width ="90%"; height="90%" seamless="seamless" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="section-pic" class="section-pic">
<span class="Centerer"></span>
<img class="Centered" src="images/slide1.jpg" style="height:75%; width:90%"/>
</div>
</div>
</html>
The CSS:
<style>
#header {
background-color:#083266;
color:white;
text-align:center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
#section2 {
width:100%;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
height: 10cm;
}
.section-text {
width:60%;
float:right;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
text-align:center;
}
.section-pic {
background-color:grey;
width: 40%;
float:left;
text-align:center;
}
.Centerer {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered {
display: inline-block;
vertical-align: middle;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 10px;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
width = 100px
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
</style>
AJAX attempt:
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('GET', 'text1.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('page_content');
el.innerHTML = reader.responseText;
}
}
UPDATED - My Solution:
For those of you who run into the same problem as I did here is the solution I used. After a lot of searching and asking around I used the display option in my css file. So add the following to your css file:
.hidden { display: none; }
.unhidden { display: block; }
In my case I wanted to update some text and a picture with a click on each tab so I added the following script to my html:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function unhide(divID,divID2) {
$(".unhidden").each(function() {
$(this).removeClass("unhidden").addClass("hidden");
});
//change text
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
//change the images
var item = document.getElementById(divID2);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
and here is the html script that I used:
<div class="section2" align="center">
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li> Example 1 </li>
<li> Example 2 </li>
</ul>
</div>
<div class="section-text">
<div id="Text1" class="unhidden">
<p> Text for Example 1 </p>
</div>
<div id="Text2" class="hidden">
<p> Add your text here for Text 2 </p>
</div>
</div>
<div class="section-pic">
<div id="Pic1" class="unhidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic1.jpg" style="height:auto; width:auto"/>
</div>
<div id="Pic2" class="hidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic2.jpg" style="height:auto; width:auto"/>
</div>
</div>
</div>
There are bunch of things you would need to do. Following is a mockup that would help you understand how you can get the text from an external file. Since you are more looking at a configuration approach, I would recomment using an xml file instead of text ( but the choice is upto you ).
// Register click event for every 'li' element
$('li').click(function()
{
var response = '';
// grab the id of the 'li' for lookup
var value = $(this).attr("id");
$.ajax({
url: "https://url/xml/test.xml", // Check for the structure below
dataType: "xml",
success: function(data) {
xmlDoc = $.parseXML(data);
$(xmlDoc).find("id").each(function ()
{
if($(this).text() == value)
{
$("#section-text").text($(this).find("title").text());
$(".Centered").attr("src",$(this).find("title").text());
}
});
}
});
});
// structure of text file as xml
"<id>Example1<title>Text Of Example 1</title><img>images/example1Image.img</img></id><id>Example2<title>Text Of Example 2</title><img>images/example2Image.img</img></id>",
http://jsfiddle.net/gcfLso5s/4/
I would also recommend reading some articles on jquery and ajax to enhance the understanding on how it works.
Let me know if you got any questions.
You can load a text file Via AJAX request and can set the text.where ever you want to.

Caption underneath image mouseover not working properly

I'm having trouble getting the text to appear beneath the image. Instead it's resting in the image when I mouse over. I'm sure this is a simple fix but I'm driving myself crazy here. If I remove the inline display function the bullet points show up. Any ideas?
Here's what I've got so far...
CSS
ul li {
float:left;
text-align: center;
font-family: Helvetica;
font-size: 15px;
display: inline;
padding:10px;
margin:5px;
background-image: none;
position: relative;
}
ul li div {
display: none;
position: absolute;
}
HTML
<div class="ul li">
<ul>
<li>
<div class="caption">About</div>
<img src='about.png'/>
</li>
<li>
<div class="caption">Portfolio</div>
<img src='portfolio.png'/>
</li>
<li>
<div class="caption">Resume</div>
<img src='resume.png'/>
</li>
<li>
<div class="caption">Contact</div>
<img src='contact.png'/>
</li>
</ul>
</div>
Javascript
$('ul li').mouseenter(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
You need to define top for the div. Refer below snapshot.
ul li div {
display: none;
position: absolute;
top:150px;
}
The top should be adjusted as per the image + font size displayed. You can check fiddle here.

Images Not Appearing

I am constructing a page with a thumbnail (beachthumb.jpg) that, with JavaScript and jQuery, should theoretically cause a full-size version of the image (beach.jpg) to appear in the space below the thumbnail. However, the full-size version isn't appearing and I cannot figure out what is causing that. Can anyone see what the problem might be?
Here's the HTML, CSS, and JavaScript (I'm positive the jQuery is correct, but if you want to see that as well, let me know and I'll add it).
Thank you in advance to anyone who can unravel this mystery!
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<script src="js/jquery-1.11.0.js"></script>
<script src="js/index.js"></script>
<title>My Name</title>
</head>
<body>
<div class="nav">
<div class="header">
<h1>My Name</h1>
</div>
<div class="links">
<ul>
<li class="travels">Travels</li>
</ul>
</div>
</div>
<div class="main">
<div class="maincontent">
<div class="thumbs">
<img src="images/beachthumb.jpg" class="beach">
</div>
<div class="big">
<img src="images/beach.jpg" class="beach">
</div>
</div>
</div>
</body>
CSS:
.nav {
margin:auto;
text-align: center;
}
.nav .header h1 {
font-family: 'Lobster', sans-serif;
color:#FF5A36;
font-size:60px;
}
.nav .links li {
display:inline;
list-style-type: none;
padding:10px;
font-size:25px;
font-family: 'Lobster', sans-serif;
font-size:30px;
color: #00A693;
}
.main {
background-image: url('images/lightcolumn.png');
width:100%;
height:100%;
position:absolute;
border-top: 2px #FF5A36 solid;
border-radius: 5px;
}
.thumbs {
display:none;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.thumbs img {
display:inline;
position:relative;
padding:10px;
}
.big img {
text-align:center;
display:none;
}
.big {
text-align:center;
}
.maincontent div {
display:none;
}
JavaScript:
$(document).ready(function () {
$('.maincontent .thumbs .beach').click(function(){
$('.maincontent .big img').hide();
$('.maincontent .big .beach').fadeIn();
});
$("ul .travels").click(function() {
$(".maincontent div").hide();
$(".maincontent .thumbs").show();
});
});
As #sahbeewah said, you are hiding div, what is parent element and then, you are going to fadeIn child element. So edit jQuery code, where thumbs is clicked and change events.
$('.maincontent .big').hide();
$('.maincontent .big').fadeIn();
Now, in CSS you don't need to hide .big img, because its parent is already hidden.
.big img {
text-align:center;
}
Here is fiddle demo.
EDIT:
Second variant, you can set selectors on img and .beach, but code will be litle changed.
$('.maincontent .thumbs .beach').click(function(){
$('.maincontent .big .beach').hide();
$('.maincontent .big .beach').fadeIn();
});
$("ul .travels").click(function() {
$(".maincontent div img").hide();
$(".maincontent .thumbs .beach").show();
});
And also, CSS need to be changed, firstly remove disaply: none; from .thumbs and then, disable display on .maincontent div children, except of divs.
.maincontent div img {
display:none;
}
Here is second demo
The reason is this line:
$(".maincontent div").hide();
This causes the div with the class big to be hidden. So it doesn't matter that you faded in its child as the parent is hidden.

Categories