I have a css piece of code like this:
.profile img.profilePic {
position: absolute;
margin: -50px 70px 50px 50px;
background: #2f293d;
border: 1px solid #2f293d;
padding: 1px;
border-radius: 50%;
box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}
Now, what if I want to change the border: 1px solid #2f293d; in Javascript...???
I've tried :
var colorA = document.getElementsByClassName("profile img.profilePic")[userA_Index];
colorA.style.border = "1px solid #000";
and also:
var colorA = document.querySelector(".profile img.profilePic")[userA_Index];
colorA.style.border = "1px solid #000"
With no success.
Note: I already did such styling using the code below but borders...
var colorA = document.getElementsByClassName("level")[userA_Index];
colorA.style="font-family:verdana; color:red; font-size:20;"
Any help to solve this is greatly appreciated...
$(".row").css({"border" : "1px solid #000","padding" : "5px"});
You can use JQuery as well
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script>
$(".row").css({"border" : "1px solid #000","padding" : "5px"});
</script>
<div class="row"> Hello World</div>
Another approach to solve this problem is by Creating a custom css class like custom-border
img.profilePic.custom-border {
border: 1px solid #000
}
and in javascript
document.querySelector(".profile img.profilePic").classList.add("custom-border");
To avoid undefined error you have to be sure about the path in querySelector
https://codepen.io/anon/pen/LvrxyG
So you only want change the border color. If then you can achieve it easily by "borderColor" property. See following snippet:
document.querySelector("#setBorder").addEventListener("click", myFunction);
function myFunction() {
document.querySelector(".profilePic").style.borderColor = "#000";
}
.profile img.profilePic {
position: aabsolute;
margin: -50px 70px 50px 50px;
background: #2f293d;
border: 1px solid #f00;
padding: 1px;
border-radius: 50%;
box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}
<div class="profile">
<img class="profilePic" src="https://via.placeholder.com/150" />
</div>
<button id="setBorder"> Click on me</button>
Related
How can I draw a thin horizontal line without using the <hr> tag ?
I tried this:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
Although it works, I want this line to be thinner. I tried to reduce 1px to 0.5px, but it didn't work.
Per this css-tricks discussion, you could give this a go:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>
You can use it but there is not much difference.
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>
There are many ways of doing this. we cant make the size of the borders less than 1px in CSS so I have tried this way. Feel free to change the opacity.
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}
I am modifying bootstrap based HTML editor. I have done image uploading part.In image uploading, I am creating an image inside a div.
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
<img src="uploads/images/dark_knight.jpg">
</div>
I want image to be resizeable hence,
element.style {
border: 1px solid;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
But the issue is when I am hitting a down key cursor is going inside a div containing an image (instead of below a div).
so what changes should I do in order to bring cursor below a div on pressing key down?
Demo: http://jsfiddle.net/u37cxxbh/2/
Make div contenteditable="false" and add textarea element next to image. As in example above.
Simply adding
contenteditable="false"
to the div containing the image seems to solve the problem.
#editor {
overflow: scroll;
max-height: 250px;
height: 250px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
div {
display: block;
}
<div id="editor" contenteditable="true">First line
<div>
//after clicking down arrow key cursor going inside an image div
<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
<img src="abcd.jpg">
</div>
</div>
<div>
<br>
</div>
<div>Last line</div>
</div>
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 .
Go to google, and without typing anything in, hover your mouse over the "I'm Feeling Lucky" button. See what it does?
I can't think how to do that...on:hover....but the actual content and animation itself, how?
It's not the button that's animating.
They have a hidden div, positioned over the button. It's absolutely positioned.
It contains a lot of spans with all the messages.
On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren't really.
<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
<!-- spans go here -->
</div>
</div>
See the value, -29px? That's all that's changing.
Add a class, ie: focus, for the borders and bold face and the toggle it with jQuery:
$('#button').hover( function () {
$(this).addClass('focus');
}, function () {
$(this).removeClass('focus');
} );
The actual rules you can see Google is using with Chrome are:
.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,.1)
}
I am having the below code for display custom scrollbar. Here some background is showing, instead of this I need display a 1px thin line image.. How can I do this? I am using the TinyScroller
Css:
#wrapper_1 {width:99%; height:600px; padding:2px}
#scroll_1 {position:relative; width:99%; height:600px; overflow:auto}
#scrollcontent_1 {position:absolute; width:94%; z-index:200}
#scrollbar_1 {float:right; position:relative; border:0; display:none; width:15px; height:600px; z-index:100; background:url(images/scroll-bg.png)}
.scroller_1 {position:relative; top:0; cursor:pointer; border:0; width:15px; background-image:url(images/scroller.png); background-position:50% 50%; background-repeat:no-repeat}
.buttonclick_1 {}
Code:
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller_1" class="scroller_1"></div>
</div>
</div>
</div>
<script type="text/javascript">
TINY.scroller.init('scroll_1','scrollcontent_1','scrollbar_1','scroller_1','buttonclick_1');
</script>
Well if you are in Chrome you can use plain ol' CSS:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-button {
display: none;
}
Demo: http://jsfiddle.net/maniator/ysgBy/
Site to check out: http://css-tricks.com/custom-scrollbars-in-webkit/
According to the doc
http://www.scriptiny.com/2009/09/javascript-scrollable-div/
I think your html is not correct. Try something like :
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller"></div>
</div>
</div>