I'm not the best with javascript and I've been asked to include it in a page I'm creating. I'm nearly there, getting a box containing a video, to slide over the screen from above and create a dark overlay. I can only get it to work using an image. I want to activate it from a href text link. I've looked everywhere, but everything I see uses the same method, using an image. Can someone help please?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->
Either you need to add the text inside the original "activator", or create another one.
Try this:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
And in your JS change
$('#activator').click(...
To:
$('#activator, #activator2').click(...
Now, both activators will trigger your script that makes the overlay show.
Also, in your CSS, you have a.activator while in your HTML is id="activator", but that might be just a typo.
Related
I have some controls on a page with some buttons. When a button is clicked, a request is made to the server, and on receiving the response, the button text updates (On/Off). The way I have it now, is that the button when clicked, remains active and the user is able to click it multiple times. But this causes the requests to pile up one after the other without being executed, which ultimately freezes or slows down the page and also the server. I want the screen to blacken out on the initial button click and remain so till the request is over with some result and only after that the user gets to click the buttons again. How do I incorporate something like a modal window in this case with the message that the request is being processed?
Help is much appreciated.
Thanks in advance.
Yes recently i have this type of issue.To fixed this you need to add a loader which will show at time of processing of Ajax
Add this in a your page:-
<div id="blockDiv" class="hide">
<div class="" style="padding: 0px; margin: 0px; text-align: center; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); width: 100%; height: 100%; position: fixed; top: 0%; background: rgb(20, 14, 51) none repeat scroll 0% 0%; opacity: 0.5; z-index: 1004; cursor: wait; right: 0px;"></div>
<div class="blockUI blockMsg blockPage " style="padding: 0px; margin: 0px; top: 50%; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); font-weight: normal; background-color: rgb(255, 255, 255); font-size: 20px; left: 35%; text-align: center; z-index: 999999 ! important; position: fixed; width: 30%;"><img src="http://deepakkit.xtgem.com/files/loading.gifjsessionidURgz41CHGWcq8M1BI6qdZQ.gif" style="height:25px;">Just a moment</div>
</div>
Add this css:-
.hide{
display: none;
}
In Ajax add:-
beforeSend : function() {
$('#blockDiv').removeClass('hide');
},
complete: function () {
$('#blockDiv').addClass('hide');
},
Then our issue will be fixed.
Like i said in my comment, you could create an absolute overlay div, hidden by default.
Then show it on beforeSend: Ajax option and hide it on .always() event.
Check the example below:
$(function() {
$.ajax({
beforeSend: function() {
$('.overlay').fadeIn();
}
//if using jQuery < 3.0, remove always and use this
//,complete: function() {
// $('.overlay').fadeOut();
//}
}).always(function() {
alert('I have finished!');
$('.overlay').fadeOut();
});
});
.overlay {
display: none;
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
z-index: 999;
background: rgba(0, 0, 0, 0.65);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="overlay"></div>
</div>
I am using Tipped plugin for tooltip..as I have used a plugin before that is ace admin plugin and Tipped but the problem is it doesnot adjust position according to window size..In free tipped version some functionalities are not there..
Main problem I am getting is I have set tooltip on load and after checking condition I am try to change it but it shows both tooltip
Code :
var a=document.createElement('a');
a.setAttribute('id','23_34');
a.setAttribute('title', 'Transcription ID: ');
if (data == true) {
Tipped.remove("#23_45");
Tipped.create("#23_45", $('<p/>').html('Transcription ID:
}
and it shows both tooltip doesnot remove 1st one..any one have solution or suggest me any tooltip that automatic adjust it position according to window height?
If you dont want to use any plugin for tooltips and just CSS this answer could help.
HTML:
CSS:
.tooltip_custom{
display: inline;
position: relative;
}
.tooltip_custom:hover:after{
background: #333;
background: rgba(0,0,0,.9);
border-radius: 5px; bottom: 26px;
color: #fff; font-size: 12.2px;
content: attr(data-title);
left: 113%;
bottom:-30%;
padding: 4px 7px;
position: absolute;
z-index: 500000000;
width: auto;
}
.tooltip_custom:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 5px;
transform:rotate(90deg);
left: 100%; content: "";
position: absolute;
z-index: 5000000001; }
I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )
I am using an overlay for a login which appears in front of everything when the user hit "sign-in". The overlay consists of an opaque wrapper which contains a solid inner-div where the login form is held.
Here is the html:
<div class="login_wrapper">
<div class="login_info">
<div class="login_form">
// form
</div>
</div>
</div>
and the css:
.login_wrapper{
position:absolute;
position: fixed;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
z-index:9998;
display: none;
}
.login_info{
font-family: "NimbusCondensed";
position:absolute;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 350px;
height:300px;
background: #cacaca;
border: solid #000000 1px;
border-radius: 10px;
z-index:99999;
pointer-events: none;
}
.login_form{
margin-top: 40px;
margin-left: 12.5%;
padding: 10 20 0 20;
width: 220px;
border: 1px solid black;
border-radius: 7px;
background: white;
box-shadow: 0px 5px 13px black;
z-index: 100000;
}
I would like this overlay to be hidden when the user clicks anywhere outside of the login_info.
I have the following JQuery handling this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
});
But login_wrapper is hidden if the use clicks ANYWHERE on the overlay, including the form in the middle which prevent then form entering any info.
Somehow the click events are getting "through" login_form & login_info and the browser reacts like login_wrapper is clicked.
How can I resolve this so that jQuery code applies ONLY when the overlay is clicked outside the inner divs.
Thanks!
Change your code to this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
$(".login_info").click(function(event){
event.stopPropagation();
});
});
This will stop the click event from bubbling up to the .login_wrapper. For more information on stopPropagation() see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.
First, you have to transform .login_wrapper in #login_wrapper, then add this:
$('#login_wrapper').click(function(e) {
if (e.target.id === "login_wrapper")
$('#login_wrapper').fadeToggle(300);
});
This will target only the element with the id login_wrapper.
Hope this helps
I'm not sure if what i want is possible but i'm using a Mootools image gallery which you can see an example of here:
</script>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
The gallery rotation is above but what i'd like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.
There's a lot of Javascript involved so i don't know what i should post here to enable people to help, but just let me know what i should put in here and i'll come back and edit.
Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i'd be much obliged.
Thanks in advance as always,
Dan
Try this css and see if its what your after.
.slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
top:40px;
color: #FFF;
text-indent: 0;
overflow: hidden;
padding: 10px 0 0 20px;
height: 70px;
}
.slideInfoZone h3{
background: #000;
width: 200px;
padding: 30px;
margin-left: -30px;
display:inline;
}
.slideInfoZone p {
position: absolute;
bottom: 0;
background: #FFF;
font-size: 14px;
color: #000;
margin: 20px 0 0 -20px;
padding: 10px 0 10px 20px;
width: 50%;
}
Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.