I've been trying constantly to maintain the div that animates still on the scene whenever the user draws his mouse on top of it.
HTML
<table>
<tr>
<td id="portrait">
<div id="photo"></div>
</td>
<td id="slide">
<div id="slider">
<a id="something" class="thisthing">some link here</a>
</div>
</td>
</tr>
</table>
CSS
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
}
#slide{
height:100px;
border: none;
padding-left:30px;
}
#slider{
border: none;
padding-left:30px;
background-color:green;
position:relative;
height:100%;
opacity:0;
width:0px;
overflow:hidden;
}
.thisthing{
cursor:pointer;
font-size: 15px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
color: green;
white-space: nowrap;
}
#something{
position:relative;
left: -25px;
}
JS
$('#portrait').mouseover(function(){
$('#slider').animate({
opacity: 1,
width: "300px"
}, 1500, $.noop);
});
$('#slider').mouseout(function(){
$('#slider').animate({
opacity: 0,
width: "0px"
}, 1000, $.noop);
});
My solution doesn't work well at all, fades badly and lags a lot because as soon as the user leaves the black square the div fades immediately. What I want is to hover the black square, the green div appears and then make the div dissapear only IF $(/*.mouseout() of the black square OR the green div*/).fadeOut(thegreendiv).
AKA When you hover the link "some link here" or any other part of the green div I want it to stay there, otherwise fadeout.
http://jsfiddle.net/SVFge/
JSFIDDLE
Use the methods mouseenter and mouseleave instead of the over and out and have a bigger zone to mouseleave
HTML
<table id="hoverOutZone">
<tr>
<td id="portrait">
<div id="photo"></div>
</td>
<td id="slide">
<div id="slider">
<a id="something" class="thisthing">some link here</a>
</div>
</td>
</tr>
</table>
NEW JS
$('#portrait').mouseenter(function () {
$('#slider').animate({
opacity: 1,
width: "300px"
}, 1500);
});
$('#hoverOutZone').mouseleave(function () {
$('#slider').animate({
opacity: 0,
width: "0px"
}, 1000);
});
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to achieve this type of table so that I can have extended labels for columns. But I don't even know what it's called to try and describe it in a search.
Edit
I can find how to round html borders with CSS. But that doesn't help with linking rows to columns. I can rotate the column header text, but again, that isn't what I'm after.
The closest thing I can come up with is a full table with borders or a background colour to highlight the connection, but this would be squared instead of rounded.
I'm wondering if there is a method of achieving this with css. Or alternatively a library which would do the same thing.
I have never heard about something like this. In general, you cannot curve any element like that, supposing that link is normal part of table (tr/td).
I have created some small thing here, making the curvers, than you can add it over your table to make that feeling, but note, that you cannot write inside it, and most umportantly, it will not work, as this will not look precise across browsers and zoom (tested on another projects, where I needed also some circled things)
So you should better design your table in other way.
Anyway, here is a snippet with rounded linked things
.circ, .circ2, .circ3 {
position:absolute;
border-radius: 50%;
display: inline-block;
background-color: transparent;
border-top: 1px solid black;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
transform: rotate(45deg);
}
.circ{width: 180px;
height: 180px; top:0; left:0;}
.circ2{width: 135px;
height: 135px; top:23px; left:22px}
.circ3{width: 80px;
height: 80px; top:50px; left:50px;}
.container{position:absolute; top:20px; left:20px; border:1px dotted black;width:200px; height:200px;}
<div class="container">
<div class="circ"></div>
<div class="circ2"></div>
<div class="circ3"></div>
</div>
Als read this - this is full list of transforms, that browsers supports:
https://www.w3schools.com/cssref/css3_pr_transform.asp
This is a close mockup to what you were looking for
https://codepen.io/anon/pen/dZrXPd
I wrote part of it in SCSS because it's easier for me, and the snippet here is a compiled version of it...
ul {
list-style: none;
padding: 0;
width: 400px;
float: left;
}
ul li:nth-child(1) {
background-color: blue;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: red;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.round-edges {
float: left;
width: 80px;
background-color: grey;
height: 70px;
margin-top: 15px;
border-radius: 0 50px 0 0;
position: relative;
}
.round-edges .round1 {
background-color: blue;
height: 70px;
width: 75px;
border-radius: 0 50px 0 0;
}
.round-edges .round2 {
background-color: green;
height: 50px;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 25px 0 0;
}
.round-edges .round3 {
background-color: red;
height: 33px;
width: 25px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 20px 0 0;
}
tr td:nth-child(1) {
width: 400px;
}
tr td:nth-child(2) {
background-color: red;
width: 20px;
text-align: center;
}
tr td:nth-child(3) {
background-color: green;
width: 20px;
text-align: center;
}
tr td:nth-child(4) {
background-color: blue;
width: 20px;
text-align: center;
}
<div class="clearfix">
<ul>
<li>
Last Col
</li>
<li>
Middle Col
</li>
<li>
First col
</li>
</ul>
<div class="round-edges">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</div>
</div>
<table>
<tr>
<td>
Something
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Some other thing
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Something Completely Different
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
</table>
??? Use id or number + legend
#1 #2 #3
left mid right
L M R
Or, may be better, if you create image.
But, you can still use border-radius + position in table row. May be its not work cross-browser, as you wish.
http://border-radius.com
(write 40 to black input box on site, for example)
I have a single page site with lots of contents and a sticky sidebar navigation on the left. I am trying to get the page to scroll down to the corresponding section in the contents div whenever a menu item is selected. This is probably really basic stuff but I just can’t wrap my head around it (been trying out various solutions, without success – see code below).
I am relatively new to javascript and jquery and would be very grateful for ideas/ suggestions.
What I managed to do so far:
The sidebar menu is sticky.
The active state of the links in the sidebar nav changes when a menu item is selected.
I also managed to get the elements in the contents div to change active state whenever the corresponding nav menu item is selected.
All that is missing now is for the menu links to work and actually push down the page to the right section ids.
Again, sorry if this is a really dumb question, I am grateful for any suggestions.
$(function() {
$('.feature_tab').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.features_public_content_container');
var allTabs = featureGroup.find('.feature_tab');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
});
//show what we need
$('.feature_box.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1000);
return false;
});
});
});
.hidden {
display:block;
color: blue;
}
.features_page {
margin-top:65px;
position: relative;
}
.features_public_content_container {
width:100%;
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:0 40px
}
#left_sidebar {
height: 100% !important;
width: 20%;
border: 4px solid green !important;
position: absolute;
float: left
}
#right {
border: 4px solid pink !important;
height: auto;
max-width:80%;
top: 0;
right: 0;
float: right;
position: relative;
}
.features_page .sidebar_nav_container {
margin:45px auto;
background: yellow;
position: relative;
float: left
}
.features_page .sidebar_nav_container .feature_tab {
float:none;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
font-size:12px;
border-left:1px solid #efefef !important;
text-transform:uppercase;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.features_page .sidebar_nav_container .feature_tab .indicator {
position:absolute;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.features_page .sidebar_nav_container .feature_tab:hover .indicator {
display:block;
border-left:4px solid #d6ecfd
}
.features_page .sidebar_nav_container .feature_tab.selected .indicator {
display:block;
border-left:4px solid #1193f6;
}
.features_page .feature_boxes_container {
padding-bottom:80px;
padding-top:45px;
text-align: center;
background: #f2f2f2;
}
.features_page .feature_boxes_container .feature_box {
background:#fff;
display:inline-block;
height:210px;
width:235px;
margin:12px;
padding: 24px;
text-align:center;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.features_page .feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}
.features_page .feature_boxes_container .feature_box .feature_overview_icon {
padding: 18px
}
.features_page .feature_boxes_container .feature_box.active .feature_overview_icon {
color: #1193f6;
}
.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
color: #363636;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body id='public_layout' class='with_header'>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container">
<div class="col span_2" id="left_sidebar">
<div class="sidebar_nav_container">
<div class="feature_tab indicator feature_category_A selected" rel="A">Features A</div>
<div class="feature_tab indicator feature_category_B" rel="B">Features B</div>
<div class="feature_tab indicator feature_category_C" rel="C">Features C</div>
<div class="feature_tab indicator feature_category_D" rel="D">Features D</div>
<div class="feature_tab indicator feature_category_E" rel="E">Features E</div>
</div>
</div> <!-- / sidebar navigation -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<div id="A"> <!-- START A Features -->
<div class="feature_box feature_category_A active">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
</div>
<div id="B"> <!-- START B Features -->
<div class="feature_box feature_category_B in-active">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
</div>
<div id="C"> <!-- START C Features -->
<div class="feature_box feature_category_C in-active">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- /.col .span_10 -->
</div> <!-- /.public_content_container -->
</div> <!-- /.features_page -->
</div> <!-- /.layout_wrapper -->
</body>
</html>
Probably you want this:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
JSFiddle
Please also see these questions:
Simple jQuery scroll to anchor up or down the page...?
Smooth scrolling when clicking an anchor link
And also you can use plugin to do this. like FullPage
I have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>
If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...
Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo
This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo
I have a page where clicking on the button it should greyout the background and the popup msg should be displayed over the greyout area..What im getting now is popup displayed over the alone background is not greyout .
This the script and style im applying
<script>
function deselect() {
$(".pop").hide();
}
$(function () {
$("#decline").live('click', function () {
$(".pop").css({ "display": "block", opacity: 0.7, "width": $(document).width(), "height": $(document).height() });
$(".pop").show();
});
$("#close").live('click', function () {
deselect();
return false;
});
});
</script>
<style type="text/css">
.messagepop {
background-color: #FFFFFF;
border: 1px solid #999999;
cursor: default;
display: none;
margin-top: -39em;
margin-left: 26em;
position: absolute;
text-align: left;
width: 394px;
z-index: 50;
padding: 25px 25px 20px;
}
.popuptxt {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
font-weight: 700;
}
.popupbtn {
padding-top: 15px;
padding-left: 135px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
</style>
THis html code
<input id="decline" type=button name="Decline" value="Decline">
<div class="messagepop pop">
<span><font class="popuptxt">By clicking decline, download will not occur, and window will close</font></span>
<div class="popupbtn">
<input type="button" name="Ok" class="btn btn-sm btn-orange" value="<%=labelutils.printTranslatedValues("Ok")%>" onclick="window.open('', '_self', ''); window.close();">
<input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark" value="<%=labelutils.printTranslatedValues("Cancel")%>">
</div>
</div>
Your code was a mess.
.live() doesn't exist, I replaced that with .on()
I made your popup fixed instead of absolute and positioned it correctly
Instead of using opacity, you should use a semitransparent background color, otherwise the contents of the element also become semi-opaque.
I also cleaned up your JS a little bit to make it easier to manage.
I also removed that on-click function you had on that OK-button - I'd advice against using that with user-friendliness in mind
function deselect() {
$(".pop").hide();
return false;
}
function select(){
$(".pop").css({
display: "block",
opacity: 1,
width: $(document).width(),
height: $(document).height()
});
$(".pop").show();
}
$(function () {
$("#decline").on('click', select);
$("#close").on('click', deselect);
});
.messagepop {
background-color:rgba(255,255,255,.7);
border:1px solid #999999;
cursor:default;
display:none;
position:fixed;
top:0;
left:0;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
.popuptxt {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
font-weight: 700;
}
.popupbtn {
padding-top: 15px;
padding-left: 135px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="decline" type=button name="Decline" value="Decline">
<div class="messagepop pop">
<span>
<font class="popuptxt">
By clicking decline, download will not occur, and window will close
</font>
</span>
<div class="popupbtn">
<input type="button" name="Ok" class="btn btn-sm btn-orange" value="OK">
<input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark" value="Cancel">
</div>
</div>
Found two issues:
Looks like the 'live' function you're using doesn't exist in jQuery since version 1.9. So unless it's coming from some other library, that's where you're main problem is.
Your .messagepop div isn't positioned correctly, and hence doesn't show up on-screen. You want the parent element to have position:relative, and then set position:absolute on .messagepop and top:0; left:0 to align it correctly.
Rudimentary working version here: http://jsfiddle.net/xj3pL213/
I think the position for .flagPoint is being set after the jquery effect takes place. I am new to jquery and was wondering if anyone can point out why the div styles are set after the effect runs?
The .flagPoint div does set itself correctly. It has to jump into position for the bounce effect. *Works fine if I comment out the bounce effect
On Firefox 26.0 and IE 11
You can find my example here:
JSFiddle
CSS:
.pointerFlag
{
width:auto;
margin:auto;
float:left;
}
.flagBox
{
width:auto;
background:LightGray;
height:30px;
float:right;
box-shadow: 1px 1px 1px #888888;
}
.flagPoint
{
width:0px;
height:0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 10px solid LightGray;
float:right;
}
javascript:
function showBalance() {
$("#divBalanceFlag").show("slide", {
direction: "left"
}, 150).delay(20);
$("#divBalanceFlag").effect('bounce', {
times: 2,
distance: 10,
direction: 'right'
}, 350).delay(50);
}
function hideBalance() {
$("#divBalanceFlag").hide("slide", {
direction: "left"
}, 150);
}
$(document).ready(function () {
$("#divBalanceFlag").hide();
});
HTML:
<table>
<tr>
<td style="position:absolute;">
<div id="divBalanceFlag" class="pointerFlag" style="position:relative; z-index:100; bottom:0px;">
<div class="flagBox"> <span runat="server" id="accountBalanceSpan" style=" line-height:30px; color:#535353; padding-left:5px; padding-right:10px; font-size:medium; font-weight:bold; "> Your Balance is: $11</span>
</div>
<div class="flagPoint"></div>
</div>
</td>
</tr>
</table>
<br /> <br />
<button onclick="showBalance();"> Show </button>
<button onclick="hideBalance();"> Hide </button>
Thanks
i have removed the float from your flagBox and added a 10px margin-left, this is the necessary space for the pointer. and in the pointer i've added this css:
position:absolute;
left:0;
bottom:0;
See fiddle here.
FIDDLE
just a little fix to prevent line-breaking on the span text
.flagBox span { white-space: nowrap;}