Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery?
So far, I've tried things like:
.opacityFade:not(.classToExclude) {
STYLES HERE
}
or
$('controlElement').click(function(){
$(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});
Ideally, I'd like to avoid having to write more JS and better separate responsibilities,but there might not be a way to do that. Little new to Front-End development, so I'm not aware of a best way to go about doing this; thanks!!
You can achieve this by placing a blanket over all elements, and then pulling the element you want to display out of the DOM order with the z-index property
.item {
background: #f00;
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
.item.selected {
position: relative;
z-index: 200
}
.blanket {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 100;
}
Note that the element needs to have a non static position.
See http://jsfiddle.net/cyberdash/fCMaT/
you could add another class to the non-dimmed/active div. I'll put together a fiddle.
http://jsfiddle.net/nqT7V/
In Jquery:
$(".item").click(function(){
var $this = $(this);
$this.parent().addClass("dimmed");
$this.parent().find(".item").removeClass("active");
$this.addClass("active");
});
$(".holder").click(function(e){
if (e.target != this) return;
var $this = $(this);
if ($this.hasClass("dimmed")){
$this
.removeClass("dimmed")
.find(".item").removeClass("active");
}
});
Related
I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.
You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.
change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.
I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});
I am trying to get an information tag to slide out from behind a circular picture. In order to do this I used a block and circle to create the information field and stuck it behind the image.
The problem I am running into is getting it to slide out smoothly. Since there are two div's, the square slides out and then the circle, causing it to look choppy.
I would like to get it to toggle in and out as if it were one object.
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
I have tried it with the employeeDot inside the employeeBlock which is in the employee div
as well as both the employeeDot and the employeeBlock seperate and in the employee div.
Both methods give similar results
Thanks
EDIT: Thanks for the replies, it's running smoother, but not quite perfect. I think I need to create one item that is shaped like a bullet, and toggle that in and out. Any ideas on how to do that?
The closest I can get is a pill shape, which leaves some of the area uncovered
EDIT: Here is my html:
<body>
<div class = 'employee'>
<div class = 'employeeDot'></div>
<div class = 'employeeBlock'></div>
<img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
And my CSS:
.pic {
height: 150px;
width: 150px;
border-radius: 75px;
position: absolute;
}
>.employeeBlock {
background-color:maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
}
>.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
}
You can specify any number of selectors to combine into a single result:
$('.employeeDot, .employeeBlock').toggle('slide');
Multiple Selector
.toggle(); is deprecated, use .slideToggle(); instead.
Slide down:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').slideToggle('fast');
});
});
Slide from side:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').animate({width: 'toggle'});
});
});
The rest of the answers have covered everything, but to get the element to shape like a bullet use:
border-radius: 10px 10px 0 0;
But match the size and sides to your likings.
try this.
$(document).ready(function(){
$('.employeeBlock,.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot, .employeeBlock').toggle('slide');});
I just wrote a really simple jQuery plugin.. sort of, that I want some help with.
(function($){
$.fn.highlight = function(words){
return this.each(function(){
//Get text from within
var text = $(this).html();
//Replace with new text
$(this).html(text.replace(words,"<i class='highlight'></i><span class='word'>"+"$1"+"</span>"));
//Get the all the highlight classes within this
var highlights = $(this).find(".highlight");
//Go through all
return highlights.each(function(){
var $this = $(this);
//Get to the next word
var wordDiv = $this.nextAll(".word").eq(0);
//Set highlight span same height as word
$this.height(wordDiv.height()+2);
//Set highlight span same width +4 then positioning
var newWidth = wordDiv.width()+4;
wordDiv.replaceWith(function(){
return $(this).contents();
});
$this.width(newWidth+2).css({
left:(newWidth)+"px",
marginLeft: "-"+(newWidth)+"px"
});
$this.delay(Math.ceil(Math.random()*30)*200+2000).fadeOut("4000",function(){
$this.remove();
});
});
});
}
})(jQuery);
$(document).ready(function(){
$("div").highlight(/(simple|wrote|knowledge)/g);
});
and the CSS:
.highlight{
background: #FBB829;
display: inline-block;
position: relative;
z-index: -1;
top: 5px;
-moz-border-radius: 4px;
border-radius: 4px;
}
and is it better a better practice to put that CSS in the jQuery plugin?
Here's a jsFiddle:
http://jsfiddle.net/aVCtA/11/
and you see my text moves when the last .highlight span disappears. Why's that? Thought relative and z-index: -1 would fix that?
Should I instead use position absolute and calculate the positioning?
Made some changes to your code, check the test on jsfiddle
Changelog:
jQuery:
Removed the .css() from the following line,
$this.width(newWidth + 2);
CSS:
Changed the styling to,
.highlight{
background: #FBB829;
display: inline-block;
position: absolute;
z-index: -1;
top: 0px;
margin-left: -2px;
-moz-border-radius: 4px;
border-radius: 4px;
}
The simpelst solution would be to not remove the highlight element after fade out. You can achieve this by changing your fade to animating opacity:
$this.delay(Math.ceil(Math.random()*30)*200+2000).animate({opacity: 0},4000);
This is not the most beautiful solution, but for your purposes, I think it is OK.
Here is the another solution:
http://jsfiddle.net/aVCtA/20/
Removed CSS:
top:5px
JS changes:
Removed the line for height setting
Added a blank space to set height as of other chars.
remove extra width so it does not move on hide.
Sorry for the unclear title, I can't formulate a better concise explanation.
I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:
$('a.showreranks').click(function () {
$('body').append('<div class="overlay"></div>');
$('#rerank_details').slideToggle(300);
return false;
});
rerank_details being the id of the div and showreranks being the class of all the links.
This is the CSS of the div:
#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}
So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I accomplish this?
I think that this is what you are trying to do:
http://jsfiddle.net/SO_AMK/r7ZDm/
The answer has already been accepted, but perhaps this is a cleaner version. The animations are all fixed.
if it doesn't have to be within the normal flow of the DOM just use absolute positioning and the event object.
function(event){
var box = //get a handle to box
box.style.position = 'aboslute';
box.style.left = event.page.x;
box.style.top = event.page.y;
}
What's the most efficient way in jQuery to extend/inherit CSS properties from one element to another?
Desired effect
$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });
#me will now have all the CSS of #blah and also background
CSS:
#blah {
padding: 5px;
width: 200px;
height: 20px;
border: 1px solid #333;
font-family: "Verdana";
}
#me {
position: absolute;
left: 5px;
top: 5px;
}
<div id="blah"></div>
<div id="me">test</div>
Edit: This will be used in a plugin so using classes and simply doing .addClass is not an option
I'm looking for the same effect as setting default value for plugin options, but instead for CSS:
$.extend([css object], [#blah css object], [#me css object])
$('#me').addClass('class');
This works, not sure if you can use the css relative to an ID though.
Try this.
function CloneStyle(sourceID, targetID){
var myStyle;
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);
if (window.getComputedStyle) {
myStyle = window.getComputedStyle(source).cssText;
}
else if (source.currentStyle) {
myStyle = $.extend(true, {}, source.currentStyle);
} else {
throw "antique browser!";
}
target.style.cssText = myStyle;
}
Now call like.
CloneStyle("blah", "me");
$('#me').css({ background: 'blue' });
Fiddle here: http://jsfiddle.net/naveen/3FdDp/
If you were to use CSS classes rather than ID references you could do the following:
$("#me").addClass($("#blah").attr("class"));
Which would copy the classes from #blah to #me