Develop Reference

Adding a class to a psuedo :before element

I am trying to add an image within my :before element with an change function. What I am doing is wrapping a label around the #signupCheck to work as a checkbox input. I added a console.log statement to my change event and it isn't running, so I am unsure of what I am doing wrong.
Does anyone see anything that could be causing this to not work?
$('#proposal-check-wrap').on('change', function() {
$('#signupCheck:before').addClass('active');
console.log("change worked");
});
#proposal-check {
display: none;
}
#signupCheck:before {
width: 40px;
height: 40px;
border: 1px solid #858585;
background: #333333;
content: '';
float: left;
display: block;
margin: 0 10px 0 2.4%;
}
#signupCheck:before.active {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
#signupCheck {
color: #858585;
font-size: 1.3rem;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
<p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">

Two things:
You are incorrectly binding the event handler to the label #proposal-check-wrap instead of the checkbox #proposal-check.
Pseudo-elements cannot have attributes.
The originating element can have a class, so attach the class to that element instead, and style its pseudo-element based on the class. In other words, instead of #signupCheck:before.active, apply the rule to #signupCheck.active:before:
$('#proposal-check').on('change', function() {
$('#signupCheck').addClass('active');
console.log("change worked");
});
#proposal-check {
display: none;
}
#signupCheck:before {
width: 40px;
height: 40px;
border: 1px solid #858585;
background: #333333;
content: '';
float: left;
display: block;
margin: 0 10px 0 2.4%;
}
#signupCheck.active:before {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
#signupCheck {
color: #858585;
font-size: 1.3rem;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
<p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">
Your two :before rules have unequal dimensions by the way. Just a note in case this is a mistake.

A couple of things.
Your change listener needs to be on the input itself.
You can't manipulate a psuedo element like that. Instead you should add the class to the element (no psuedo mentioned in it) and style it accordingly.
JS fiddle
JS
$('#proposal-check').on('change', function() {
$('#signupCheck').addClass('active');
});
CSS
#signupCheck.active:before {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}

javascript add/remove class from div id?

I have the following div:
<div id="locker"></div>
My Div Id uses the below css styling:
#locker{
width:20px;
height:20px;
background-repeat: no-repeat;
background-size:15px 15px;
background-position:5px center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-style:solid;
border-width:1px;
border-color:#fff;
padding:3px;
position:relative;
text-align: center;
margin:auto;
filter: invert(75%);
-webkit-filter: invert(75%);
background-image: url('../images/padlock.png');
}
I also have a class styling:
.locker2{
background-image: url('../images/key.png');
}
when a user clicks on another div of mine I am running the below javascript and I want the background image of my Div 'locker' to change from the background image in #locker to the one in .locker2
Here's how I'm trying to do it:
<script>
$('#edit').click(function(){
$('input').prop('disabled', false);
$('input').css("background", "transparent");
$('#locker').removeClass('#locker').addClass("locker2");
$('#submit').css("display", "block");
});
</script>
However the background image is not changing. Please can someone show me where I am going wrong? Thanks

locker is the id of the element not a class, so for styling purposes it is easier to change your structure to a class like
$('#edit').click(function() {
$('input').prop('disabled', false);
$('input').css("background", "transparent");
$('#locker').removeClass('locker').addClass("locker2");
$('#submit').css("display", "block");
});
#locker {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: 5px center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-style: solid;
border-width: 1px;
border-color: #fff;
padding: 3px;
position: relative;
text-align: center;
margin: auto;
filter: invert(75%);
-webkit-filter: invert(75%);
}
.locker {
background-image: url('//placehold.it/32X32/ff0000');
}
.locker2 {
background-image: url('//placehold.it/32X32/ff00ff');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="edit">Edit</button>
<div id="locker" class="locker"></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 .

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.

How do I prevent only the page turn event in Ibooks fixed layout book?

I'm trying to create a stop/start button for an ibooks read-aloud fixed layout book, and I want to prevent the page from turning at the location of this button. The HTML element is as follows.
<p ibooks:readaloud="startstop" id="rass" ontouchstart="prevent(event)">SS</p>
The javascript is as follows.
function prevent(event){
event.preventDefault();
}
So ibooks:readaloud attribute makes the read aloud start and stop when the p tag is touched, however, preventing default behavior of on touch also prevents the behavior of the ibooks:read aloud attribute.
Is there a way for me to manually start and stop the read aloud, or to prevent only the page turn?

Add this code to your HTML file:
<p ibooks:readaloud="startstop" id="rass">✵</p>
And put this into your CSS file:
html p#raplay {
top: 955px;
left: 700px;
color: green;
padding: 0px 6px 0 10px;
background: white;
border: 2px solid black;
border-radius: 15px;
}
html p#rastop {
top: 955px;
left: 700px;
padding: 0px 6px 0 10px;
color: red;
display: none;
background: white;
border: 2px solid black;
border-radius: 15px;
}
html p#rass {
top: 955px;
left: 700px;
padding: 2px 6px 4px 8px;
color: green;
background: white;
line-height: 40px;
border: 2px solid black;
border-radius: 15px;
}
html.-ibooks-media-overlay-enabled p#raplay {
display: none;
}
html.-ibooks-media-overlay-enabled p#rastop {
display: block;
}
if that p tag click, the read aloud will stop. that is the default of the read aloud. you dont need to use javascript.