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>
Related
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>
I want a directive or any method to scroll inside div horizontally using angular or javascript, no jquery please.
http://jsfiddle.net/EB4UC/70/
the fiddle above shows what i'm trying to achieve.
$('#left').click(function () {
var leftPos = $('div.outer_container').scrollLeft();
console.log(leftPos);
$("div.outer_container").animate({
scrollLeft: leftPos - 500
}, 800);
});
$('#right').click(function () {
var leftPos = $('div.outer_container').scrollLeft();
console.log(leftPos);
$("div.outer_container").animate({
scrollLeft: leftPos + 500
}, 800);
});
the above code is jQuery of want i want in angular
Thanks
Bind the functions to the buttons and use the scrollLeft properties incrementing or decreasing the value by the amount you want to
function leftScroll() {
document.querySelector('div.outer_container').scrollLeft -= 500;
}
function rightScroll() {
document.querySelector('div.outer_container').scrollLeft += 500;
}
.outer_container { margin: 0 auto; }
#left { margin-left: 300px; }
#right { }
.button {
cursor: pointer;
width: 50px;
text-align: center;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
<div class="inner_container" style="width: 10000px;">
<table>
<tr>
<td style=" width: 577px; ">
<div style="text-align:left; margin: 0px 10px 10px 10px; width:557px; ">
<p>Add Comment to the Tesco Catalogue</p>
<form class="comment_form" action="profile"
method="post">
<textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</td>
<!-- do a for loop here to generate all other items -->
<td style="width:577px;">
<div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
<p class="comment_username">User said at such a time</p>
<p class="comment_comment">Comment ......</p>
</div>
</td>
<td style="width:577px;">
<div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
<p class="comment_username">User said at such a time</p>
<p class="comment_comment">Comment ......</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<span id="left" class="button" onclick="leftScroll()">Left</span>
<span id="right" class="button" onclick="rightScroll()">Right</span>
Hello stackoverflow community I need help with my script. I'm using NicEditor and I'm trying to make it resizeable like text-area. But when I made div: resize:both it can be resized in height, but not in width.
Here is script:
<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; overflow-y: auto; overflow-x: hidden;">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>
What can I do to make this editor resizeable like text-area? Here is jsfidle: https://jsfiddle.net/JVhpJ/11/
What I did first is to create a div called editorcontainer and inserted the values you used in your html for the container of NicEditor.
By adding width:auto and adding display:inline-block and removing all the overflow values, the div will now on adapt to the width and height of the children.
Below the example:
<script src="js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
.nicEdit-main {
resize:both;
border:1px solid grey;
}
.editorcontainer{
width:auto;
border-width: 0px 1px 1px;
border-style: none solid solid;
border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
display:inline-block;
}
<div class="editorcontainer">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>
Also below find your modified Fiddle:
https://jsfiddle.net/JVhpJ/13/
Its a lil bit hackish, but this is what I did:
bkLib.onDomLoaded(function () {
nicEditors.allTextAreas();
$("#container").children().css("width", "100%");
$("#container").resizable();
$("#textarea1").prev().css("height", "70%");
});
.nicEdit-main {
height:90%;
width:98% !important;
}
textarea {
width:100%;
}
#container {
overflow:hidden;
}
Here is the JSFiddle demo
Hmm, maybe something like this (main div style: overflow:auto; resize:both)?
<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; resize: both;
overflow: auto;">
<p>vw v wev wv vw ev</p>
</div>
I've been programming for a few months and making little scripts here and there for a site which has API and jQuery. Lately I have been working on a mini-rpg game for that site; unfortunately I am not exactly the most experienced person.
I encountered some problems with some .bind("click") jQuery events, mainly one in peculiar that won't stop and endlessly repeats. I made some buttons that should trigger more functions on click. I have a feeling I might be endlessly repeating between 2 functions, as some console.log messages are neverendingly repeating, crashing the tab in which I'm testing the code. I couldn't find what was the cause of the loop.
//#initialFunctions
settingsButton();
menuButton();
//#buttons
function btnCloser(){
if($('#btn1').length!==0){
$('#btn1').remove();
console.log("Btn1 removed.");
}
if($('#btn2').length!==0){
$('#btn2').remove();
console.log("Btn2 removed.");
}
if($('#btn3').length!==0){
$('#btn3').remove();
console.log("Btn3 removed.");
}
}
function buttons3(){
$('#mainWindow').append('<button id="btn1" type="button" style="position:absolute; top:105px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#mainWindow').append('<button id="btn2" type="button" style="position:absolute; top:135px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#mainWindow').append('<button id="btn3" type="button" style="position:absolute; top:165px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#btn1').hover(function(){$('#btn1').css("cursor","pointer");$('#btn1').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn1').css("cursor","auto");$('#btn1').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
$('#btn2').hover(function(){$('#btn2').css("cursor","pointer");$('#btn2').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn2').css("cursor","auto");$('#btn2').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
$('#btn3').hover(function(){$('#btn3').css("cursor","pointer");$('#btn3').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn3').css("cursor","auto");$('#btn3').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
//#buttonsUI
function menuButton(){
$('body').append('<button id="menuBtn" type="button" onclick="menu()" style="position:absolute; top:55px; right:500px; width:100px; height:20px; background-color:black; color:white; opacity: 0.8; border-radius:20px; opacity: 0.8; z-index:100; font-size=200%; color:white; text-align:center;">Menu</button>');
$('#menuBtn').hover(function(){$('#menuBtn').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#menuBtn').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
//#menu
maintenanceMode=false;
function menu(){
$('statWindow').remove();
if($('#mainWindow').length===0){
$('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
$('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
$('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=170%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">X</div>');
$('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
btnCloser();
buttons3();
$('#btn1').bind("click",console.log("Stats button clicked.")).text('Stats');
$('#btn2').bind("click",clinic()).text('Clinic');
$('#btn3').bind("click",mainWindowClose()).text('Close');
}
//#mainUI
notShown=true;
function newWindow(){
$('#miniGame').remove();
notShown=false;
$('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
$('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
$('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=200%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">x</div>');
$('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
//$('#mainWindow').append('<button id="battleButton" type="button" onclick="clinicText()" style="position:absolute; top:160px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;">Battle!</button>');
}
function showAlert(){
$('body').append('<div id="miniGame" onclick="newWindow()" style="position:absolute; top:55px; right: 350px; height: 20px; width: 20px; background-color: red; border-radius:20px; opacity: 0.8; z-index: 100; font-size=500%; color: solid red; text-align: center;">!</div>');
$('#miniGame').hover(function(){$('#miniGame').css("cursor","pointer");$('#miniGame').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#miniGame').css("cursor","auto");$('#miniGame').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
notShown=false;
$('#miniGame').bind("click",monsterEncounter());
}
function mainWindowClose(){
btnCloser();
$('#mainWindow').remove();
$('#closeButton').remove();
notShown=true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It seems my code is somehow repeating over and over again and I wondered what were the causes. Thanks!
When binding to an event, you need to provide a function that will be executed when the event occurs.. you appear to be passing the result of calling a function.
For example:
$('#btn1').bind("click",console.log("Stats button clicked."))
Is actually the same as
var x = console.log("Stats button clicked.");
$('#btn1').on('click', x);
which probably isn't what you intended.
Try this:
$('#btn1').on('click', function () {
console.log('Stats button clicked.');
});
It is likely your .hover( handlers that are endlessly repeating tho.
Also, try breaking your code down and indenting it.. it's nice to see it all on one line, but it makes it hard to follow. For example, in your hover function you have invalid javascript (which will likely be throwing errors in your console)
Made an in-depth search and learnt on how to create some stylish custom created textboxes to achieve a better graphic look. I have two issues to complete this mesh-up of textboxes so that they serve a total functioning of a common textbox.
I'm unable to execute the :focus on the parent div container, although the code is perfectly fine in CSS because when going by Inspect Element (Chrome), Force Element to> :focus it does what I want but in the real-time it never does nevertheless clicking on its children or itself.
I want to add the :hover effect on the child div container (the left black coloured div) in which it'll expand the :after transition for a certain amount of pixels (assuming +20px/+30px).
The desired and the final result should look like in the picture below:
#submitForm {
border:2px grey inset;
border-radius:10px;
display:table;
margin: 10px auto 0;
height: 500px;
position:relative;
width: 800px;
}
#submitForm #btnSend {
bottom:20px;
display:block;
height: 50px;
position:absolute;
right: 20px;
width:100px;
}
#submitForm .highlights {
border-bottom:5px solid #2E8DEF;
border-radius:15px;
float:left;
height: 45px;
margin-top: 40px;
margin-left:40px;
width: 520px;
}
#submitForm .highlights:focus {
border-bottom:none;
outline: 0;
-webkit-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
-moz-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
}
#submitForm .tags, #submitForm .textarea {
float:left;
font-size: 25px;
font-family: calibri;
font-style: italic;
height: 40px;
position:absolute;
text-align: center;
}
#submitForm .tags {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
background: #333333;
color: #2E8DEF;
height:40px;
padding-top:5px;
text-align: center;
width: 120px;
z-index:3;
}
#submitForm .tags:after {
background: #333333;
content:" ";
display: block;
left: 90px;
height: 100%;
position:absolute;
top: 0;
width: 30%;
z-index:-1;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
}
#submitForm .tags:after:hover {
/* Code for expanding the skewed .tags:after */
}
#submitForm .textarea {
background-color:#F0F0F0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 120px;
overflow: hidden;
padding-top: 5px;
width: 400px;
appearance: field;
-moz-appearance: field;
-webkit-appearance: field;
}
#submitForm .textarea:focus {
outline:0;
}
<forms id='submitForm'>
<div id='formName' class='highlights'>
<div class='tags'>Name</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formSurname' class='highlights'>
<div class='tags'>Surname</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formAddress'class='highlights'>
<div class='tags'>Address</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formCity' class='highlights'>
<div class='tags'>City</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formPhone' class='highlights'>
<div class='tags'>Phone</div>
<div class='textarea' contenteditable></div>
</div>
<button id="btnSend" type="button" onclick='submitListOfProducts()'>Submit</button>
</forms>
And, the link to JS fiddle:
http://jsfiddle.net/xa3nwhj4/1/
Vishal provided the reason for the hover effect not working - this is my addition to it:
- focus only fires on the textarea, but you want to change the style of the parent div
so lets change the css entry for #submitForm .highlights:focus to #submitForm .focusedhighlights
and then let jquery do the magic:
$(".textarea").focus(function(){ //event handler, to fire when a textarea gets focused
$(this).parent().toggleClass("focusedhighlights") //toggle class on parent element for highlight effect
});
$(".textarea").focusout(function(){ //event handler to fire, when textarea gets unfocused
$(this).parent().toggleClass("focusedhighlights") // toggle class to remove highlight effect
});
see working fiddle here: http://jsfiddle.net/vo59rgnd/2/
The :focus is not working because you are adding focus to .highlights which is a <div> and not input element.
And to expand the onhover. The CSS should be like this
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
width:160px;
}
#submitForm .tags:hover:after {
left:130px;
}
See the demo here : http://jsfiddle.net/Lrdmuzu6/