Define Javascript slider hit/rollover area - javascript

Im having an issue defining the hit area for a javascript sliding element.
See example:
http://www.warface.co.uk/clients/warface.co.uk/
Please slide over the grey box on the right side to reveal the button, although this works I would only like for the slider to only be triggered by rolling over the red block.
CSS
.slidingtwitter { /* -- This is the hit area -- */
background: #ccc;
width:255px;
height:55px;
overflow: hidden;
top:50%;
right: 0px; /* -- This is the sliding start point -- */
position: fixed;
font-family: Gotham, Sans-Serif;
z-index: 50;
}
.slidingtwitter.right {
right:0px;
}
.slidingtwitter .caption { /* -- This is the sliding area -- */
background: #fff;
position: absolute;
width:260px;
height:55px;
right: -205px; /* -- This is the sliding start point -- */
}
.slidingtwitter a {
color: #484848;
font-size: 20px;
text-transform: uppercase;
}
.slidingtwitter a:hover {
color: black;
}
.slidingtwitter .smaller {
font-size: 12px;
font-family: Gotham Medium;
}
.twitterblock {
background: #f35555 url("styles/images/button_twitter.png") no-repeat 14px 15px ;
width:35px;
height:35px;
padding:10px;
float:left;
display:block;
}
.slidingtwitter .followme {
background: url("styles/images/button_arrowheadthin.jpg")no-repeat right 0;
height:35px;
display:block;
float:left;
line-height:14px;
width:140px;
margin:10px 0px 0px 14px;
padding-top:6px;
padding-right: 40px;
}
JS
$('.slidingtwitter').hover(function(){
$(".slide", this).stop().animate({right:'0px'},{queue:false,duration:400}); //Position on rollover
},function() {
$(".slide", this).stop().animate({right:'-205px'},{queue:false,duration:400}); //Position on rollout
});
Any suggestions would be much appreciated.


I'm not sure if the gray area should be visible at all but you can check this solution:
animate the whole .slidingtwitter:
$('.slidingtwitter').hover(function(){
$(this).stop().animate({right:'0px'},{queue:false,duration:400});
},function(){
$(this).stop().animate({right:'-205px'},{queue:false,duration:400});
});
Change the CSS to stick the .slide{left:0;/*remove right:-205px;*/}
Set the starting point for .slidingtwitter{right:-205px;}
You can add cursor:pointer; to .twitterblock just to make it look like a button
Cheers
G.

Related

Display Popup Using Javascript After This Div is VIsible

I want to display a "Share Popup" when a specific Div appears. I am using an embedded quiz on my website which the user has to answer multiple choice questions then gets a result. The result div class is called result_screen_container.
I already have the popup but it's written to be triggered by time. I want it to trigger when the result is there after all questions are finished.
#popup_box {
display:none;
position:fixed;
_position:absolute;
left: 50%;
top: 50%;
z-index:10001;
background:#fff;
box-shadow: 0px 0px 15px #000;
border-radius: 8px;
}
#popup_box .inner1 {
text-align: center;
padding:0 40px;
color:#000;
padding:20px;
}
#popupBoxClose {
font-size:0;
right:-22px;
top:-14px;
position:absolute;
cursor: pointer;
width: 38px;
height: 37px;
display: block;
}
/* Popup ends */
#fbshare{width:275px;height: auto;overflow: hidden;}
.inner-fbshare{width:275px;overflow: hidden;}
.inner-fbshare h3{font-size: 19px;margin: 0 0 10px 0;}
.inner-fbshare img{width:275px;height:150px;}
.outer-fbshare{width:275px;height: 45px;overflow: hidden;}
.fbshare_bt
{
font-size: 22px; background:none repeat scroll 0 0 rgb(64, 94, 159);color:#FFF;
text-align:center;margin-top:10px;padding: 12px;
border-radius: 8px;
font-weight: bold;
}
.fbshare_bt:hover{color:#FFF;text-decoration:none;}
.close_fbshare{float: right;color: #A3A3A3;text-decoration: none;}
.sa-icon.sa-custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat;
}

The div has to be hidden, then;
var yourDivvisible = document.getElementById("YOURDIVID").style.visibility = "visible";
if(yourDivvisble === true){ */ do something here to display your popup */ }
Something like this?

Trouble with chat layout

I am trying to replicate a chat layout on a site I am working on. I was able to create the chat bubble and get the content in pretty much the right spot, I am just having trouble getting it exactly how I want. There are only a few tiny things I am having trouble with. I can't figure out how to get the triangle on the side of the bubble's border to be as thin as the rest of the bubble, as well as making it lower and smaller. I'm having trouble with positioning the sign in image a little lower like in the image of what I need it to look like. And lastly the "Sign In to Comment" needs to be a little to the left of the image. If anyone could shed any light on any of these things, it would be super appreciated!
Currently:
What I am trying to achieve:
As you can see I am very close! just a few tiny things giving me trouble.
HTML:
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
<div class="cell two">
<img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />
</div>
</div>
<span class="si">Sign In to Comment</span>
CSS:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}

Here is one way to do it:
<div class="wrapper">
<p class="talk-bubble">
talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
</p>
<p class="sign-in">
Sign In to Comment
</p>
<img src="your/image.png" />
</div>
CSS:
div.wrapper {
position: relative;
padding-bottom: 0px;
background-color: #ffffff;
z-index: -2;
}
div.wrapper img {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid black;
width: 40px;
height: 40px;
}
.sign-in {
text-align: right;
margin: 0;
margin-right: 50px;
padding: 0;
}
p.talk-bubble {
border: 1px solid #3A7DBA;
padding: 15px;
background-color: #CDE5F7;
position: relative;
margin-right: 60px;
}
p.talk-bubble:before,
p.talk-bubble:after {
box-sizing: border-box;
padding: 0;
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
border: 20px solid transparent;
}
p.talk-bubble:before {
z-index: -1;
border-bottom: 20px solid #3A7DBA;
right: -12px;
bottom: -1px;
}
p.talk-bubble:after {
border-bottom: 20px solid #CDE5F7;
right: -10px;
bottom: 0px;
}
https://jsfiddle.net/mcgraphix/zLx5967t/

Check this out:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:25px; /* controls vertical position */
bottom:auto;
left:auto;
right:-15px; /* value = - border-left-width - border-right-width */
border-width:5px 0 5px 15px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top: 27px;
bottom: auto;
left: auto;
right: -13px;
border-width: 3px 0 3px 13px;
border-color: transparent #ccf;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
</div>

Font Awesome with Half Style CSS

I'm wondering if anyone can help me / If this is even possible.
I'm trying to half style (using halfstyle.js) the youtube font-awesome icon so that the icon is like the youtube logo (bottom half red, top half white)
I'd like to do this on hover, but I can't even seem to get this going for just as default.
JSFiddle
body {
background: rgba(0,0,0,.4);
}
.fa {
font-size: 10em;
color: white;
}
.fa-youtube {}
.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<i class="fa fa-youtube textToHalfStyle"></i>

You cannot do that for FontAwesome i.fa icons because, already HalfStyle is based on the ::after and ::before pseudo elements. Also, FontAwesome uses :after for this. You need to create another element and give :hover option for achieving this.
Snippet
$(function () {
$(".textToHalfStyle").each(function () {
$(this).parent().append('<div class="cloned"></div>');
$(".cloned").append($(this).clone());
});
});
body {
background: rgba(0,0,0,.4);
font-size: 160px;
}
.fa {
color: #fff;
}
.cloned {
opacity: 0;
position: absolute;
display: block;
z-index: 1;
left: 8px;
top: 76px;
height: 0.65em;
overflow: hidden;
}
.cloned .fa {
position: relative;
top: -68px;
color: #f00;
}
.fa:hover ~ .cloned,
.cloned:hover {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<i class="fa fa-youtube textToHalfStyle"></i>

How do I resize an Avatar image into a smaller one in a fixed header navbar using jquery and css

I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}

For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN

Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.

Line Displacement with fadein

I'm kind of stuck on creating a fadeIn of strings. What I want to do is have a bar appear next to a string when the user hovers over it. Like this:
| string
But the thing is, when the | appears, there is a displacement of the string to the right, how would I go about fixing this problem? This is my current CSS and Java code.
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
display: none;
margin-right: .4em;
}
JS:
$(document).ready(function(){
$('.details').mouseenter(function(){
$('.line').remove();
$(this).prepend('<a class="line"></a>');
$('.line').fadeIn(250);
});
$('.details').mouseleave(function(){
$('.line').fadeOut(250);
});
});

Assuming each row (parent element of .line and .details) is relative-positioned, try this
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
position: relative;
left: 10px; /*play with this*/
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
position: absolute; /* */
left: 0px; /* */
display: none;
margin-right: .4em;
}
This will push the details element 10px or however much space is needed while preventing the line element from pushing the details

Done without any JavaScript, can you believe it?
Fiddle
p::before {
content: '|';
position: absolute;
margin-left: -5px;
opacity: 0;
transition: opacity 250ms;
}
p:hover::before {
opacity: 1;
}
Ahhh, the power of CSS3

Categories