Ive seen sites where things like a login box will apprear, and the rest of the page will fade, buit the box stays the same.
How is this done?
Can someone please give me an example?
Thanks!
Check link text
And add following code on head section for faded background
<script language="Javascript">
$(document).ready(function() {
$.facebox.settings.opacity = 0.2
});
</script>
You can use any of the jquery lightbox /modal scripts to achieve the effect. There's lot of scripts that do what you are trying to achieve. My personal recommendations would be SimpleModal (if you need something just for a login window) or ColorBox (if you need multiple overlays and require a lot of customization)
Related
I don't know CSS or html very well, only a little. All I want is for the slideshow on the front page of my website to not be click-able. I want it to be there to view but I don't want people to be able to click it (which leads to it's album view.) In the back page of koken, there is a Custom CSS area to add extra code to change the theme.
Is there something I can put there to stop the main slideshow from being click-able? I need to know specifically what to put.
I think the div is either "home-slideshow" or div.pulse-main-container.
I tried
div.pulse-main-container.click(function () {
return false;
});
but I don't think that's how you even write it out. I don't know what to put, that's why I need someone to spell it out for me.
I use "inspect element" with my browser to look at the code, but it's all gobble-de-gook to me. This doesn't seem like a hard thing to fix but for the life of me I can't figure it out!
$('.home-slideshow').css({
'pointer-events':'none'
});
put this somewhere in your html. (maybe right before the end of your body tag).
<script>
$(window).load(function(){
$('.pulse-main-container').click(function(){
return false;
});
});
</script>
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
I have a simple
Back to Top
and this puts me to the top of the page immediately. But I want it to go to the top of the page slowly with just CSS.
Is this possible?
Thanks in Advance.
Edit:
Okay, for anyone with the same problem. It did it with this JQuery:
// #btt is ID of the Back to Top Link
$("#btt").click(function () {
//html and body is used because of Browser compatibilit
$("html, body").animate({scrollTop: 0}, 1000);
});
You can't activate actions like scrolling with pure CSS, sorry. You'll need some jQuery in there.
What you CAN do is trick the user in thinking the page has scrolled by moving elements around with CSS on :hover, but that's a really bad practice, and would require much more coding that a simple jQuery function.
I feel like this is a stupid question but here goes. Is it possible to have a page change upon hover of menu button? for example if i point my mouse at the about us menu button it would change the page automatically without having to click on? wordpress, html, etc...
Thank in advance.
While this isn't natural as far as user experience, you can easily accomplish it with Javascript. For example -
document.getElementById('myButton').onmouseover = function() {
window.location.href = 'http://www.google.com/';
};
JSFiddle Example
This should be really easy for you guys but I'm a real beginner on this & need it explained simply to me. I reckon it'll also help a lot of others like me out there who are just starting out on jquery...
I'm building a site that needs to have a button on one of its pages which when clicked not only hides a div of content (for which there are loads of solutions out there) but at the same time shows a previously hidden div of content.
I need to know the jquery which'll do this & what I need to wrap around the button to set off the jquery.
Can you help me out?
Thanks,
Stu.
If you are only concerned with two div elements, jQuery.toggle() supports two event handler functions:
$('button').toggle(function(){
$('div1').hide();
$('div2').show();
},function(){
$('div1').show();
$('div2').hide();
});
This should work just make sure that one div has a css property display:none and the other div does not (is visible.)
Inside ajax call on success you have to wirte which div you have to hide and which div you have to show.
$.ajax({
url: "Sevlet",
type: 'POST',
dataType: "json",
data:{"id":id},
contentType:"application/x-www-form-urlencoded",
success: function (data) {
$("#div1").hide();
$("#div2").show();
}
});
Firstly, jQuery is just a library of functions to do stuff.
So inbulit functions like hide() and show() can be used to do what you desire.I believe the documentation on jQuery for hide/show/hide_show on the links below are quite simple to understand and you should have little to no problem. http://api.jquery.com/hide/ http://api.jquery.com/show/
http://www.w3schools.com/jquery/jquery_hide_show.asp
However, another way to approach the problem is to use the jQuery methods to toggle CSS properties which will cause the div elements to be shown or hidden based on css properties. I will demonstrate it for the height property, but several other's could also be used including max-height, left, right, top, bottom etc.
Altering the properties in CSS, I can see how the Div is visible or hidden
Example:
<html>
<head>
<style>
.Div_I_Want_To_Show{
background: #ffe400;
width:100%;
height:0px;
overflow:auto;
}
</style>
</head>
<body>
<div class="Div_I_Want_To_Show">
<p>Some Random Text Here</p>
</div>
<button class="btn">Click to See Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$('.Div_I_Want_To_Show').css('height','20em')
});
</script>
</body>
</html>
The fiddle link : https://jsfiddle.net/L7pmarzh/
And in case you wanted to know, you can animate it as well, which I guess you would want to any website, since a simple hide and show effect is not appealing to any user.
Hope this solves your problem :)