Sliding from right to left - javascript
I am trying to slide a a panel from the right of the button to the left. Here is my css:
style.css:
.pToolContainer {
position : absolute;
right: 0;
}
.btn-pTool{
//display:block;
position:absolute;
right: 0;
margin:0;
padding:0;
background-image: url(slide_button.png);
background-repeat:no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
.pToolSlidePanel{
min-height: 185px;
min-width: 185px; /*WIDTH OF HIDDEN SLIDE PANEL*/
display: none; /*THE ELEMENT WILL NOT BE DISPLAYED*/
border-right-width: 2px; /*ADDS RIGHT BORDER OF 2PX*/
border-left-width: 2px; /*ADDS LEFT BORDER OF 2PK*/
border-right-style: solid; /*MAKES RIGHT BORDER SOLID*/
border-left-style: solid; /*MAKES LEFT BORDER SOLID*/
border-right-color: #626262; /*RIGHT BORDER COLOR*/
border-left-color: #626262; /*LEFT BORDER COLOR*/
background-color: #949494; /*SLIDE PANEL BACKGROUND COLOR*/
border-bottom-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
border-bottom-style: solid; /*MAKES BOTTOM BORDER SOLID*/
border-bottom-color: #626262;
border-top-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
border-top-style: solid; /*MAKES BOTTOM BORDER SOLID*/
border-top-color: #626262; /*BOTTOM BORDER COLOR*/
opacity: .8; /*SETS SLIDE PANEL BACKGROUND'S OPACITY TO 80%*/
margin: auto; /*CENTERS OUR SLIDE PANEL*/
position: fixed;
//bottom: 50px;
overflow:hidden;
}
test.html:
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
I have tried the following jquery statement but it doesn't seem to work:
$(pToolSlidePanel).animate({width:'toggle'},2000);
where pToolSlidePanel is the HTMLElement created in my javascript file using:
var pToolSlidePanel = document.createElement("div");
I have also tried the following tutorial http://www.learningjquery.com/2009/02/slide-elements-in-different-directions but I keep getting an error stating that HTMLElement does not have a css method
DEMO: http://so.devilmaycode.it/sliding-from-right-to-left/
$(function() {
var iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = parseInt(liW * $slider.find('li').length);
$slider.css('width', liFW + 'px');
$('.button a').click(function() {
var left = (this.id == 'right') ? parseInt($slider.css('left').toString().replace('-', '')) : parseInt($slider.css('left'));
var side = (this.id == 'right') ? (((left + (liW * iXS)) == liFW) ? 0 : -(left + liW)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - liW) : 0);
rotate(side);
return false;
});
var rotate = function(leftY) {
$slider.stop(true, true).animate({
left : leftY
}, 500);
}
});
for full code look at the source code of demo example.
Try this
$(".pToolSlidePanel").animate({width:'toggle'},2000);
For Class pToolSlidePanel use $(".pToolSlidePanel")
and For eg: id pToolSlidePanel use $("#pToolSlidePanel")
Edit: Try this configuration here http://jsfiddle.net/TQZh5/50/
I removed some of the CSS to make it easier, but it should be trivial to add it back in.
$(pToolSlidePanel).animate({width:'toggle'},2000);
Should be
$('.pToolSlidePanel').animate({width:'toggle'},2000);
Also, what are you binding the animate action to? Is the jQuery wrapped in the ready() function so it knows the DOM is completely loaded?
Want to slide a element from position A(right) to B(left)?
HTML:
<div class="pToolContainer">
<div class="pToolSlidePanel">
</div>
</div>
CSS:
.pToolContainer {
width:400px;
height:100px;
background-color:#ccc;
position:relative;
}
.pToolSlidePanel
{
position:absolute;
right:0;
top:0;
width:100px;
height:100px;
background-color:#ffcc33;
}
Javascript (jQuery):
$('.pToolSlidePanel').animate({
left: '-=200'
}, 2000);
Related
"top" property with same value is different in showing
I have some social icons and I put a div that its visibility is hidden and I want to show it when every of the icons is hovered. I wrote the jQuery code below and works nicely, I have used console.log to see event.pageY and top property when is visible and they are same :
$(function() {
$('.social-icons a img').hover(function(event) {
var socialIconName = $(this).data('name');
var Y = event.clientY;
var DOMTarget = $('#social-icon-text');
DOMTarget.text(socialIconName);
DOMTarget.css({
'top': Y,
'visibility': 'visible'
});
}, function(event) {
$('#social-icon-text').css('visibility', 'hidden');
});
});
My HTML code :
<div class="social-icons">
<img src="Images/GitHub.png" alt="GitHub" data-name="GitHub">
<img src="Images/Instagram.png" alt="Instagram" data-name="Instagram">
<img src="Images/Telegram.png" alt="Telegram" data-name="Telegram">
<img src="Images/Twitter.png" alt="Twitter" data-name="Twitter">
<div id="social-icon-text">Instagram</div>
</div>
And this is my CSS :
#social-icon-text {
background-image: linear-gradient(120deg, #D4FC79 0%, #96E6A1 100%);
color: #555;
position: absolute;
font-size: 12px;
padding: 3px 10px;
border-radius: 3px;
top: 0;
left: 120%;
text-shadow: -1px 1px 5px rgba(0, 0, 0, .25);
visibility: hidden;
}
#social-icon-text::before {
content: "";
width: 0;
height: 0;
border-right: 5px solid #D4FC79;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
}
My problem image
My problem is when the div is appeared, although pageY and top property are the same but div has higher value that is showed underneath of the icon but I want them beside together.
Any response will be appreciated.
I used position method and its top property instead of changing pageX value.
Slow background position change in IE
<body onload ="start()">
<div id="masc">
<div id="cont">
</div>
</div>
</body>
I run into a problem with background-position change in Microsoft Edge. It is slow. Other browsers is just fine. Here is my sketch. Maybe it is because of the width of the #cont div. It is preaty big. But in other browsers there is no problem...
function start(){
var cont = document.getElementById("cont");
for(var i = 0; i<1440; i++){
var celda = document.createElement("DIV");
celda.className = "celda";
celda.id=Math.floor(i/60) + ":" + (i%60);
celda.innerHTML = Math.floor(i/60) + ":" + (i%60);
celda.offsetRight = function(){return (this.offsetLeft + this.offsetWidth + (this.style.borderWidth*2));};
cont.appendChild(celda);
}
}
.celda {
display: inline-block;
margin-left:5px;
border:solid 1px red;
width:30px;
height:80px;
margin-top: 225px;
color: white;
padding-top: 40px;
background-image : url("difusor_cerrado.png");
background-position : 0px -80px;
background-repeat : no-repeat ;
}
.celda:hover{
background-position : 0px 0px;
}
#cont {
margin-top:44%;
background : transparent; ;
display:table;
white-space: nowrap;
height:350px;
position:relative;
border:solid 1px black;
}
#masc {
width:1000px;
height:800px;
margin:auto;
overflow-y :hidden;
overflow-x : auto;
border:solid 1px blue;
background-image : url("hierva.png");
background-position : 0% 99%;
background-repeat: repeat-x;
}
This are the images I am using as backgrounds
Flip Effect without Transform or Rotate
I stumbple upon this Javascript flip effect page. When I inspect its obfuscated source code, I can not find css property transform or rotate . I want to know how the flip effect is achieved. What CSS properties are involved?
$(document).ready(function() {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').click(function() {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
} else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function() {
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
body {
/* Setting default text color, background and a font stack */
font-size: 0.825em;
color: #666;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.sponsorListHolder {
margin-bottom: 30px;
}
.sponsor {
width: 180px;
height: 180px;
float: left;
margin: 4px;
/* Giving the sponsor div a relative positioning: */
position: relative;
cursor: pointer;
}
.sponsorFlip {
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
background: url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover {
border: 1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow: 0 0 30px #999 inset;
-webkit-box-shadow: 0 0 30px #999 inset;
box-shadow: 0 0 30px #999 inset;
}
.sponsorFlip img {
/* Centering the logo image in the middle of the .sponsorFlip div */
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -70px;
}
.sponsorData {
/* Hiding the .sponsorData div */
display: none;
}
.sponsorDescription {
font-size: 11px;
padding: 50px 10px 20px 20px;
font-style: italic;
}
.sponsorURL {
font-size: 10px;
font-weight: bold;
padding-left: 20px;
}
.clear {
/* This class clears the floats */
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/jquery.flip.min.js"></script>
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="data:image/png;base64,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">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
http://www.google.com/
</div>
</div>
</div>
It's a jQuery plugin they use to achieve this result. It's called jquery.flip.min.js 😉
• Here is a more legible version of their JavaScript code:
eval(function(p, a, c, k, e, r) {
e = function(c) {
return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
};
if (!''.replace(/^/, String)) {
while (c--) r[e(c)] = k[c] || e(c);
k = [
function(e) {
return r[e]
}
];
e = function() {
return '\\w+'
};
c = 1
};
while (c--)
if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
return p
}('(5($){5 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*#1O!#*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))
Fancy menu code not working, when class of anchor tag made active
I've a menu code. When we mouse over it, a rectangular background animates to the mouse cursor and move back to active link, when mouse out. It works fine, when class of li tag is made active. But I need anchor tag to have class active.
live demo: http://insicdesigns.com/demo/css3/exp1/index.html
Please see the below code:
<div id="cmwmenu1" class="ddsmoothmenu ddcmwmenu" >
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contacts</li>
<li>Back to Article</li>
<li>How it Works?</li>
</ul>
<div class="floatr"></div>
</div>
The live demo is working fine, but see their code. They have class active to list tag. My requirement is to have active tag in anchor, instead of li. If I do change, then this script isn't working.
I want it to be like below format and the javasript to work for below code.
<li><a class="active" href="">Home</a></li>
Javascript:
$(document).ready(function () {
var dleft = $('#cmwmenu1 li.active').offset().left - $('#cmwmenu1').offset().left;
var dwidth = $('#cmwmenu1 li.active').width() + "px";
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('li').hover(function(){
var left = $(this).offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
})
});
Css:
#cmwmenu1 {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}
a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
ul li {
list-style: none;
float:left;
text-align: center;
}
ul li a {
padding: 0 20px;
text-align: center;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
how about this
var li = $('li');
li.click(function(){
$this = $(this);
li.removeClass('active').find('a').removeClass('active');
$this.addClass('active').find('a').addClass('active');
})
Mouseenter event not working
What I have done in this function is create a drop down menu when you click a button:
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "â–¾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "â–´";
}
}
This works successfully. But this is not what I want. What I want is for someone to be able to mouseover something and have the form pop up.
What I have done is put it into a mouseenter function like so:
$('#story').mouseenter(function() {
var panel = document.getElementById('dropdown'), maxH="300px";
panel.style.height = "0px";
}).mouseleave(function() {
var panel = document.getElementById('dropdown'), maxH="300px";
panel.style.height = maxH;
});
This does not work. The actual mouseenter event is never executing because I have tried alerting and it didn't work either.
Could someone please tell me what I'm doing wrong? Some more related code is below:
#story {
position:relative;
top: -20%;
left: 0%;
width: inherit;
height: 25%;
margin: 0 auto;
margin-top: 5px;
background-color: transparent;
color: black;
border-style: solid;
border-width: 1px;
border-color: #D8D8D8;
}
#dropdownbutton {
float:center;
width:144px;
height:46px;
padding-top:16px;
background:#F90;
}
#dropdown{
position:absolute;
height:0px;
width:550px;
background:#000;
top:60px;
left:160px;
border-radius:0px 0px 8px 8px;
overflow:hidden;
z-index:10000;
transition: height 0.3s linear 0s;
}
view:
<div class="main">
<div id="dropdownbutton">
<button type="button" onclick="toggleNavPanel('dropdown')">Drop Down</button>
</div>
<div id="dropdown">
<p>Working</p>
</div>
Location of story element:
<div class="info_bar">
<div id="story">Story</div>
<div id="info">Info</div>
<div id="content">Content</div>
</div>
Based on the discussions... jQuery library was not included and the code was not added in a dom ready handler