Develop Reference

Javascript slide left to right

I want to:
A roll-out animation from the header's abbreviation into the written out meaning + subheading with information about that main header.
Edit: Example: S3 rolling out into "Solidify solid states" and have the subheading gradually increase in transparency right after this occurs
Expanding it from left to right when it is clicked (thus revealing the underlying information that is hidden).
What I've done in jsfiddle seems to be very choppy. (It opens the secondary text in two segments).
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>
CSS:
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position:absolute;
}
JS:
$(document).ready(function(){
$(".s3notebox").click(function(){
$(".sub-headings").slideToggle();
});
});
https://jsfiddle.net/snpb0gau/

I just written a solution. Here I've made some changes in your html, css & js file. Hope it will help you.
$(document).ready(function(){
$(".s3notebox").click(function(){
$("#subHeading").toggleClass('left-to-right-slide');
});
});
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position: absolute;
transition: all 0.33s ease;
left: -100%;
}
.left-to-right-slide {
left: 1%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div id="subHeading" class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>

SharePoint Javascript - Tabs absolute top; How to insert image above?

I am using the current javascript for tabs in a Sharepoint webpart. Unfortunately it seems like it forces the tabs to absolute top. So anything I added to that "column" of webparts goes underneath the row of tabs, including the banner. I am try to read the code and see what I can do to change this, but can't figure it out. Do you guys have any ideas? Thanks!
Source: http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx
Code I'm Using:
<style type="text/css">
.et-tab {
PADDING-BOTTOM: 6px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: inline-block; BACKGROUND: url(/_layouts/images/selbg.png) repeat-x; FONT-SIZE: 13pt; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 6px
}
.et-activetab {
BORDER-BOTTOM: #706257 1px solid; BORDER-LEFT: #706257 1px solid; BACKGROUND-COLOR: #706257; COLOR: #ffffff; BORDER-TOP: #706257 1px solid; BORDER-RIGHT: #706257 1px solid
}
.et-inactivetab {
BORDER-BOTTOM: #f7f7f7 1px solid; BORDER-LEFT: #f7f7f7 1px solid; BACKGROUND-COLOR: #f7f7f7; COLOR: #706257; BORDER-TOP: #f7f7f7 1px solid; BORDER-RIGHT: #f7f7f7 1px solid
}
.et-separator {
BACKGROUND-COLOR: #706257; HEIGHT: 5px
}
.et-tabrow {
WHITE-SPACE: nowrap
}
.et-offscreen {
POSITION: absolute; MAX-WIDTH: 1px; MAX-HEIGHT: 1px; TOP: -9999px
}</style><script type="text/javascript">
(function(){
var AP="",sec=0,Header="none",Split="No",Expand="",Print="";
if (document.forms[0].elements["_wikiPageMode.value"]=="true"||document.forms[0].elements["MSOLayout_InDesignMode"].value=="1"){return;}
var el=document.getElementsByTagName("SCRIPT"),p=el[el.length-1],sT,a,sep,tabRow;
do {p=p.parentNode;sT=p.innerHTML.split("MSOZoneCell_WebPart");}while (sT.length<4 && p.parentNode.id!="MSO_ContentTable")
if (p.getAttribute("contenteditable")=="true"){return;}
if (p.nodeName=="DIV"){sep=document.createElement("div");p.insertBefore(sep,p.firstChild);tabRow=document.createElement("div");p.insertBefore(tabRow,p.firstChild);}
else{sep=document.createElement("td");var sepTR=document.createElement("tr");sepTR.appendChild(sep);tabRow=document.createElement("td");var tabTR=document.createElement("tr");tabTR.appendChild(tabRow);if (p.nodeName=="TBODY"){p.insertBefore(sepTR,p.firstChild);p.insertBefore(tabTR,p.firstChild);}else if (p.nodeName=="TR"){p.parentNode.insertBefore(tabTR,p);p.parentNode.insertBefore(sepTR,p);}else {return;}}
sep.className="et-separator";tabRow.className="et-tabrow";var children=p.childNodes;p=p.parentNode;var etRoot=[],etHeader=[],etTab=[],tabsID=[];
for (var j=0;j<children.length;j++){try{var d=children[j].getElementsByTagName("td");for (i=0;i<d.length;i++) {if(d[i].id.indexOf("WebPartTitle")==0){var WPid=d[i].id.replace(/WebPartTitle/,"");if (d[i].innerHTML.indexOf("(Hidden)")==-1) {var up=d[i];while (up!=children[j]){if (up.parentNode.innerHTML.indexOf('id=WebPart'+WPid+' ')>=0||up.parentNode.innerHTML.indexOf('id="WebPart'+WPid+'" ')>=0){WPid="et"+WPid;etHeader[WPid]=up;etRoot[WPid]=children[j];etTab[WPid]=d[i].getElementsByTagName("span")[0].cloneNode(true);etTab[WPid].id=WPid;etTab[WPid].className="et-tab et-inactivetab";etTab[WPid].onclick=function(){activateTab(this);};tabRow.appendChild(etTab[WPid]);tabsID.push(WPid);break;}up=up.parentNode;}}}}}catch(e){}}
var Tabs=tabRow.getElementsByTagName("span"),TabCount=Tabs.length;
if (Split=="Yes") {var sd=document.createElement("div"),index=Math.floor(TabCount*0.5);tabRow.insertBefore(sd,Tabs[index]);}
if(AP.length && sec>0) {sec=sec*1000;interval="";a=document.createElement("span");a.innerHTML="|>";a.className="et-tab et-inactivetab";a.onclick=function(){if(interval==""){this.innerHTML="||";interval=window.setInterval(function(){Autoplay();},sec)}else{this.innerHTML="|>";window.clearInterval(interval);interval=""}};tabRow.appendChild(a);var Autoplay=function(){for(i=0;i<TabCount;i++)if(Tabs[i].className=="et-tab et-activetab"){var j=(i+1)%TabCount;activateTab(Tabs[j]);break}};if (AP=="Play"){a.innerHTML="||";interval=window.setInterval(function(){Autoplay();},sec)};}
if (Expand.length) {a=document.createElement("span");a.innerHTML=Expand;a.className="et-tab et-inactivetab";a.onclick=function(){for(i=0;i<tabsID.length;i++){etTab[tabsID[i]].className="et-tab et-inactivetab";etRoot[tabsID[i]].className=etRoot[tabsID[i]].className.replace(/et-offscreen/g,"");etRoot[tabsID[i]].style.pageBreakAfter="always";etHeader[tabsID[i]].style.display="";}};tabRow.appendChild(a);}
if (Print.length) {a=document.createElement("span");a.innerHTML=Print;a.className="et-tab et-inactivetab";a.onclick=function(){this.style.display="none";var f=document.getElementById("s4-workspace")||document.getElementsByTagName("body")[0],ed=p.parentNode.insertBefore(document.createElement(p.nodeName),p);f.appendChild(p);for (j=0;j<f.childNodes.length-1;j++) {try{f.childNodes[j].className+=" et-offscreen";}catch(e){}}a=document.createElement("span");a.innerHTML="Back to Page";a.className="et-tab et-inactivetab";a.onclick=function(){this.previousSibling.style.display="inline-block";this.parentNode.removeChild(this);ed.parentNode.insertBefore(p,ed);ed.parentNode.removeChild(ed);for (j=0;j<f.childNodes.length;j++) {try{f.childNodes[j].className=f.childNodes[j].className.replace(/\s*et-offscreen/g,"");}catch(e){}}};tabRow.appendChild(a);};tabRow.appendChild(a);}
function activateTab(t){document.cookie=tabsID.join("_")+"="+t.id+";path=/";for(i=0;i<tabsID.length;i++){etHeader[tabsID[i]].style.display=Header;if(t.id==tabsID[i]){etTab[tabsID[i]].className="et-tab et-activetab";etRoot[tabsID[i]].className=etRoot[tabsID[i]].className.replace(/\s*et-offscreen/g,"");}else{etTab[tabsID[i]].className="et-tab et-inactivetab";etRoot[tabsID[i]].className+=" et-offscreen";}}}var m=GetCookie(tabsID.join("_"))?GetCookie(tabsID.join("_")):tabsID[0];activateTab(etTab[m]);})();
</script>​​​​

You can try removing TOP: -9999px from .et-offscreen .. I'm not sure that it will solve, just a suggestion .

Why this javascript show all the lines togeather and not one by one like in the demo page?

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
<div class="demo3">
<ul>
<li>what's causing the layout to break? Attempting to make a horizontal layout website ?</li>
<li>WordPress Mobify mobile theme, CSS</li>
<li>Gridview with Table.Rows.Count ==0 to show Footer row that include checkbox with imageurl cast</li>
<li>JS/jQuery - animated random name picker</li>
</ul>
</div>
<style>
.demof{
border: 1px solid #ccc;
margin: 25px 0;
}
.demof ul{
padding: 0;
list-style: none;
}
.demof li{
padding: 20px;
border-bottom: 1px dashed #ccc;
}
.demof li.odd{
background: #fafafa;
}
.demof li:after {
content: '';
display: block;
clear: both;
}
.demof img{
float: left;
width: 100px;
margin: 5px 15px 0 0;
}
.demof a{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #06f;
}
.demof p {
margin: 15px 0 0;
font-size: 14px;
}
.demo3 {
font-family: Arial, sans-serif;
border: 1px solid #C20;
margin: 50px 0;
font-style: italic;
position: relative;
padding: 0 0 0 80px;
box-shadow: 0 2px 5px -3px #000;
border-radius: 3px;
}
.demo3:before {
content: "Latest News";
display: inline-block;
font-style: normal;
background: #C20;
padding: 10px;
color: #FFF;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
.demo3:after {
content: '';
display: block;
top: 0;
left: 80px;
background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
height: 20px;
}
.demo3 ul li {
list-style: none;
padding: 10px 0;
}
</style>
<script type='text/javascript'>
$(function(){
$('.demo3').easyTicker({
visible: 1,
interval: 4000,
direction: 'up'
});
});
</script>
The text is scrolling up all ok but in the LatestNews i see all the time 4 lines all the lines of text instead of see each time line by line one line each time like in the demo page:
Demo Page
In the LatestNews demo example there is one line each time scrolling up.
What should i change and what cause that so there are 4 lines each time and not one like in the demo page ?

In your particular web-site that you linked at the time the padding as specified in the .demo3 style is set to 0, 0, 0, 80px.
That would usually be enough as you can see in this isolated demo, using your posted code.
Following an inspection of your linked site. The problem seems, that your site also imports another CSS file:
<link rel="stylesheet" type="text/css" href="/files/main_style.css?1398686941" title="wsite-theme-css">
That file contains all sort of styles, including a few with !important and that file seems to over-write or your CSS styles.
IF you open your site, open the debugger and find that <link...> line and delete it (from the console only) you will see your HTML will look fine. Mind you, the rest of your site will not.
I don't know how much influence you have over that file but to compensate without changing it change your padding from 80px to 115px (or what ever suits) in the .demo3 style, similar to this:
.demo 3{
...
padding: 0, 0, 0, 115px // changed from padding: 0, 0, 0, 80px
...
}
I tried the above in the console on your site and it seemed to do the trick.

Appending content in a <div> with limited sizes

In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}

It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.

Displaying some text when mouse is over an input text box

I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.

You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/

You can use Jquery Tooltip:
Jquery Tooltip

Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}

* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html

Try this property it's asp but may work for your case
ErrorMessage="Your Message";