Why I can't click this link inside :focus? The link always immediately closed when I try to click them.
If possible, I prefer to use only CSS, but if someone can give tips with simple Javascript or jQuery, that's would be great.
This is my code:
.ourservices{text-align:center;background-color:grey;padding:3%}
.cont{width:20%;background-color:white;display:inline-block;padding:1%;margin:1%;cursor:pointer;float:left}
.cont:focus{width:40%}
.cont a{display:none;text-decoration:none;color:black;font-weight:700}
.cont a:hover{color:white}
.cont:focus a{display:inline-block}
.cont img{width:100%}
.cont:focus img{width:100%}
.cont p{display:none;width:90%}
.cont:focus p{display:inline-block}
.kirig{width:100%;display:inline-block}
.cont:focus > .kirig{width:50%;float:left}
.kirig img{float:left}
.kirip{width:50%;display:inline-block}
.more{background-color:white;margin:0 auto;border:2px solid grey;display:inline-block;padding: 2% 3%;margin:5%}
.more:hover{background-color:gray;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.clearfix{clear:both}
<div class="ourservices">
<div class="cont kiri" tabindex="0">
<div class="kirig">
<img border="0" src="http://www.mo2properties.com/wp-content/uploads/2016/02/click-here-pointer-md.png" />
</div>
<div class="kirip">
<p>click read more click read more click read more</p>
<a href="http://stackoverflow.com">
<span class="more">
Read More
</span>
</a>
</div>
</div>
<div class="clearfix" />
</div>
Your link "Read more" is expanded when <div class="cont"> have focus. When you click on "Read more", your div loose focus and "Read more" is hide
$('.kirig').click(function(){
$('.kirip').toggle();
});
Related
I have a wordpress query looping through posts on a page. Each .audio-box has 2 .play buttons that I need to work together, when one is clicked I want the other one in that div to do the same. The problem is i have multiple audio-box divs on the page. I just need the 2 play buttons in that specific .audio-box div to work at the same time not all the others.
This is the html I have:
<div class="audio-box">
<div class="audio-btn">
<img src="image/path.jpg" alt="play" />
</div>
<div class="audio-content">
<div class="date">Published 18/01/20</div>
<h2>title</h2>
<p>content</p>
</div>
<div style="clear:both;"></div>
<div class="audio-player play-wrap">
<audio id="player" class="music">
<source src="path/to/audio.mp3" type="audio/mpeg" />
</audio>
<div id="audio-player">
<div id="controls">
<i id="play" class="fa fa-play play"></i>
<div id="progressbar"></div>
<span id="time" class="time">00:00</span>
<i id="mute" class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
</div>
<i class="fa fa-play play"></i>
</div>
</div>
This is the javascript that i have:
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$('.play').toggleClass("fa-pause", !player.paused);
$('.play').toggleClass("fa-play", player.paused);
});
I know the issue is because I am saying toggle class on the .play element but is there any way to say that .play element within that specific .audio-box div?
The following will look upward from the clicked button, to the next parent .audio-box
and will unfold the action on the .play elements it finds in it somewhere:
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$(this).closest('.audio-box')
.find('.play')
.toggleClass("fa-pause", !player.paused)
.toggleClass("fa-play", player.paused);
});
$(".audio-box").click(()=>{
$(".audio-box").children().css({"color": "red", "border": "2px solid red"});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am using navigation drawer of Framework7 plugin on my hybrid app. The drawer can be open/close using the button as well as using swipe/slide left/right.
Now when the navigation drawer was open, the class <div class="panel panel-left panel-reveal"> added another class which is active class.
So when opened: <div class="panel panel-left panel-reveal active ">
when closed: <div class="panel panel-left panel-reveal>
Based on that event, is it possible to add style to other class?
Example is this class: <div class="views"> to <div class="views" style="opacity: 0.5">
What to accomplish: When the drawer is open, the class view will add style, when drawer is close remove the view class style.
Is it possible to catch that event and accomplish what I would like to do?
Sorry for the delay, so below is the sample code to add a css class to a div only on hover event. I have done this using html and css only. (No DOM manipulation).
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
NOTE - Just remember to use the appropriate CSS selector based on your HTML structure.
Hope this helps. Let me know if you have any questions. Happy to help.
Hi Yes it is Possible. Using HTML and Javascript itself. You can also achieve this using JQUERY DOM manipulation. Let me know which one would you want to know.
I have modified your HTML a little
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
Just add this JavaScript function and you will be good to go.
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS will be
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
I hope this helped.
I'm using one jQuery pop-up library called thickbox.js.
There is one small image present on my page. When user clicks on this image a call to some function is given, the thickbox.js library creates the HTML/CSS for pop-up on the fly and shows up the pop-up.
The most important thing to note here is if the HTML source of page is viewed when the pop-up is shown I'm not able to see the HTML code of pop-up. I tried to view the HTML source of pop-up through Firebug console by inspecting the element then I could see the HTML source of pop-up. This indicates that the DOM doesn't contain the HTML code of pop-up box.
Now my issue is I want to close this opened pop-up if user clicks anywhere on the page other than the pop-up area. I tried few codes but unfortunately they are not able to do the thing I want to do. Now I'm just clueless for this issue. Following is the code for your reference:
<a href="#" onclick="return $Core.box('prj_name.contactform', 400);">
<!-- This is the function call which generates the pop-up HTML on the fly -->
<img width="33" height="89" align="middle" border="0" pagespeed_url_hash="3893298907" alt="" src="http://58.189.67.789/theme/frontend/foxplus/style/default/image/layout/contact.jpeg">
</a>
Following is the pop-up HTML generated dynamically. I've taken from Firebug console:
<div class="js_box_image_holder_full ">
<div id="js_box_id_3" class="js_box " style="width: 400px; top: 15%; left: 69%; margin-left: 0px; margin-top: 278px; z-index: 5003; display: block;">
<div class="js_box_title">Contact</div>
<div class="js_box_content">
<style type="text/css">#js-contact-message:after{content:'\1f603'}</style>
<div id="js_contact_message">Your details submit succesfully</div>
<div id="js_contact_error_message"></div>
<iframe style="display:none" name="js_contact_frame" id="js_contact_frame" frameborder="1" width="100%"> </iframe>
<div class="main_break">
<form method="post" action="http://58.189.67.789/prj_name/contact/" id="js_contact_form" target="js_contact_frame">
<div class="table">
<div class="p_left">
<label for="email">Full Name</label>
</div>
<div class="p_right">
<input name="val[full_name]" id="full_name" value="" size="60" type="text">
</div>
<div class="clear"></div>
</div>
<div class="table">
<div class="p_left">
<label for="email">Email</label>
</div>
<div class="p_right">
<input name="val[email]" id="email" value="" size="30" type="text">
</div>
<div class="clear"></div>
</div>
<div class="table">
<div class="p_left">
<label for="text">Message</label>
</div>
<div class="p_right">
<textarea name="val[text]" id="text"></textarea>
</div>
<div class="clear"></div>
</div>
<div class="table" style="display:none;">
<div class="p_left">Send Yourself a Copy</div>
<div class="p_right">
<input name="val[copy]" value="1" type="checkbox">
</div>
<div class="clear"></div>
</div>
<div class="table_clear">
<input value="Submit" class="button" type="submit">
<div class="t_right"><span id="js_comment_process"></span></div>
</div>
</form>
</div>
<div class="js_box_title_store">Contact</div>
</div>
<div style="display: block;" class="js_box_close">
x
<span class="js_box_history">prj_name.contactform</span>
</div>
</div>
The jQuery codes I tried are as follows:
$('body').click(function(e) {
if( $('.js_box_image_holder_full').length ) {
if (!$(e.target).closest('.js_box_image_holder_full').length) {
$('.js_box_image_holder_full').hide();
}
}
});
The second code I tried is as follows:
$(document).click(function(event) {
if(!$(event.target).closest('.js_box_image_holder_full').length) {
if($('.js_box_image_holder_full').is(":visible")) {
$('.js_box_image_holder_full').hide()
}
}
})
The issue with both of the above code snippets is the pop-up doesn't open up when user clicks on image. Also I didn't get any error or warning in a Firebug console.
The third code snippet I tried:
$(document).mouseup(function (e) {
var container = $(".js_box");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".js_box_image_holder_full").remove();
}
});
The issue I get with above code is the opened pop-up gets closed if user clicks anywhere on page other than the surface of pop-up but when user again clicks on the image to show the pop-up it doesn't come again. This time also I didn't get any error or warning in Firebug console.
I do not use any sort of plugin for popup, but I have simple solution for you. On trigger, fade in an empty mask beside popup and make the mask an agent for fade out. Shown below.
$(function(){
$('.clickme').click(function(){
$('.popup,.mask').fadeIn();
});
$('.mask').click(function(){
$('.popup,.mask').fadeOut();
});
});
.clickme{
display:inline-block;
cursor:pointer;
padding:10px;
background:#00cfff;
color:#fff;
}
.mask{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
z-index:2;
display:none;
}
.popup{
display:none;
position:fixed;
top:20px;
left:20px;
width:100px;
height:100px;
background:#d30043;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='outer'>
<span class='clickme'>Click Me</span>
<div class='mask'></div>
<div class='popup'>I am a Popup</div>
</div>
I have 5 buttons and when i pass my pointer o some of then, i want change the background image but with a fade effect.
HTML:
<body>
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
</div>
</div>
</body>
Jquery:
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
$("#column1").mouseover(function(){
$("body").css('background-image', 'url("img/dib1.jpg")');
});
$("#column2").mouseover(function(){
$("body").css('background-image', 'url("img/dib2.jpg")');
});
$("#column3").mouseover(function(){
$("body").css('background-image', 'url("img/dib3.jpg")');
});
$("#columna4").mouseover(function(){
$("body").css('background-image', 'url("img/dib4.jpeg")');
});
$("#column5").mouseover(function(){
$("body").css('background-image', 'url("img/dib5.jpg")');
});
</script>
The problem is when change the image, is so quickly, for that i want put a fade transition, tried put fadetoggle slow, but disappear all my content because use "body" for my selector.
Here is a little mock up I made. Its just a basis, but should be easily modifiable.
http://jsfiddle.net/sB8hU/
HTML:
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
</div>
</div>
<div class="bg1"></div>
<div class="bg2"></div>
jQuery:
$('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
var bgImage = $(this).data('bg');
if( $('.bg1').is(':visible') ){
$('.bg2').css('background-image', 'url(' + bgImage + ')');
$('.bg1').fadeOut(200, function(){
$('.bg2').fadeIn(200);
});
} else {
$('.bg1').css('background-image', 'url(' + bgImage + ')');
$('.bg2').fadeOut(200, function(){
$('.bg1').fadeIn(200);
});
}
});
Use a absolute element and add background to it. Do it like this:
<body>
<div id="bg"></div>
And styles:
#bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}
And follow your same trick. :D
CSS3 is the easiest way. You just have to reassign the image in JavaScript as you already have, then putting this in the body tag will take care of the rest for you. Be sure to play with the timing to meet your needs. Disclaimer: this transition doesn't work in IE earlier than 10.
body {
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
Unfortunately, this is not currently possible with "simple" CSS.
However, you could use a container (your web page) with position: relative and place your main div in it, with position: absolute and top: 0; left: 0. then add, at the same level as this div:
<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" />
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />
In your CSS :
img.bg-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-out; /* could be another duration / transition effect */
-webkit-transition: opacity 500ms ease-out;
-moz-transition: opacity 500ms ease-out;
-ms-transition: opacity 500ms ease-out;
-o-transition: opacity 500ms ease-out;
}
img.bg-img.active {
opacity: 1;
}
Then in your code, instead of changing the background-image property of "body", change the class of the desired images et add / remove active.
You can use CSS 3 transition property. Define class in your style sheet for example as follows:
.backgroundChanged
{
background-image: your image;
transition-property:background-image;
transition-duration: 0.3s;
transition-timing-function: linear;
}
And then apply this class programmatically in javascript when you need.
Hope this helps.
How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?
If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}
You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>