I don't feel my headline ticker is good to see for my visitors. it is in please check this link
what I need is to make the headline words inside of the background but readable enough. it is like a shadow. anyone can help please, this site must be submitted tomorrow and be soon launched.
the headline ticker I use is in javascript as below:
<script language="javascript">
//<![CDATA[
var lgth=0;
var info1="Selamat Datang di www.savageryonline.com";
var info2="SavageryOnline ... Tempat Belanja Aman dan Nyaman Bersama Keluarga!";
var info3="Belanja Super Hemat! Kualitas Super Hebat!";
dataTampil=new items(info1,info2,info3);
var ini=0;
var st=0;
var x=dataTampil[0].length;
function items() {
lgth=items.arguments.length;
for (i=0; i<lgth; i++) this[i]=items.arguments[i];
}
function newheadlinez(){
var datShowNow=dataTampil[ini].substring(0,st)+""; document.getElementById("headline").innerHTML=datShowNow; document.getElementById("headline").style.color="white"; document.getElementById("headline").style.cursor="pointer";
if(st++==x) {
st=0; setTimeout("newheadlinez()",5000); ini++; if(ini==lgth) ini=0; x=dataTampil[ini].length;
}
else setTimeout("newheadlinez()",50);
}
//]]>
</script>
these words I need to change like shadow but not and as if it is united with the background. Sorry, I can't give you screenshot for this.
"Selamat Datang di www.savageryonline.com"
"SavageryOnline ... Tempat Belanja Aman dan Nyaman Bersama Keluarga!"
"Belanja Super Hemat!
I try to change it with CSS but it doesn't work. (i'm bad in css).
UPDATE:
I fiddle out the script:
JsFiddle Link
Do you want to try shadow effect..try adding this in #topup
-webkit-box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
-moz-box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
try using opacity property:
{
opacity:0.5;
}
Related
Is there a way to style videojs captions?
The nativeTextTracks is set to false and I can see that the plugin is rendering his own caption.
A new div created for each row of text and the style of that div is inline.
I tried to send settings to the player init but videojs documentation is a bit lacking in this respect.
var player = videojs('my_video', {
'html5': {
nativeTextTracks: false
},
textTracks: {
??? maybe something here ???
},
'fluid': true,
controlBar: {
children: {
'playToggle':{},
'currentTimeDisplay':{},
'timeDivider':{},
'durationDisplay':{},
'progressControl':{},
'fullscreenToggle':{},
}
}
});
This is an undocumented feature, but I managed to find it out by reading the TextTrackSettings source code. Basically, you need to call setValues on the settings of your player, and then to apply the settings with updateDisplay:
let player = videojs('my_video');
player.ready(function(){
var settings = this.textTrackSettings;
settings.setValues({
"backgroundColor": "#000",
"backgroundOpacity": "0",
"edgeStyle": "uniform",
});
settings.updateDisplay();
});
I've done with the css selector >.
This will override the default black background and add a black border around the letters:
.vjs-text-track-cue > div {
background: transparent!important;
text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}
I have also faced the same issue when I was needed to add padding. I have investigated a lot and found that cue can only work on following properties:
color
opacity
visibility
text-decoration
text-shadow
background
outline
font
line-height
white-space
For example :
Ex : 1
video::cue {
color:#ccc;
}
Ex : 2
video::cue {
outline:5px solid gray;
}
So we just need to apply css for video::cue to play with Caption Track Text in any Video Player
I want to give the value for text-shadow properties one by one using DOM in javascript.
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
if(conf.hasOwnProperty('vshadow')) document.getElementById('p1').style.text.hshadow = 5px;
if(conf.hasOwnProperty('hshadow')) document.getElementById('p1').style.text.vshadow = 5px;
if(conf.hasOwnProperty('blurRadius')) document.getElementById('p1').style.text.blurradius = 5px;
if(conf.hasOwnProperty('shadowColor')) document.getElementById('p1').style.text.color = red;
i tried the above code.but that does not work.
is there any way to do this using DOM in javascript
I dont know if the DOM objects hshadow, vshadow, blurradius really do exist but the correct code should be document.getElementById('p').style.textShadow = "5px 5px 5px red"
The text shadow syntax is:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
So when you want to apply particular properties, you can apply like:
text-shadow: 2px 2px 2px #ff0000;
To apply through JS:
document.getElementById('p1').style.textShadow = "2px 2px 2px #ff0000";
Hope this helps.
i want to add a css code in a javascript function, this is the function that I have
function test1() {
document.getElementById("p1").innerHTML = "test";
}
and i want this css code in it
p1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
-
Basically, I have a paragraph (p1) and I use javascript because I made a button which onclick="test1()" so when it clicks it it will change the text to the one I put which is "test", but I don't want the whole paragraph to have the shadows, I only want the 'test' to have it, hope I was clear enough!
thank you
Try this,
<p id="p1">
This is a <span>test.</span>
</p>
<button id="button1">Button</button>
From what I understand from your question, you want the function to add a shadow to JUST the word test. In that case using a <span> element might be the easiest way to achieve that. .innerHTML() does not select the text inside the <p> instead it sets the text so you would have been left with an element with just the word 'test' inside.
And the javascript below can be modified to your liking, but the basic concept is there.
var button = document.getElementById("button1");
button.addEventListener("click", function(){
var p = document.getElementById("p1");
var test = p.getElementsByTagName("span")[0];
test.style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
});
Fiddle: https://jsfiddle.net/0Lhc4tav/
Something like that ?
document.getElementById("p1").style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
Found here : http://www.w3schools.com/jsref/prop_style_textshadow.asp
It's hard to say, you should really post your HTML as well so we can better understand it. You can also try this if you can use jQuery:
$('.p1').css('text-shadow','0px 5px...etc');
But I agree that you may not need to do this via JS.
The Fiddle: http://jsfiddle.net/GosuWhite/sXgAY/
You input numbers separated by any characters and it calculates some summary statistics. The summary statistics are output in area designated for the calculator in this divs:
<div id="solWrap">
<div id="solTitles"></div>
<div id="solStats"></div>
</div>
So You'd basically have something like this:
Sample Variance: 12.212
Population Variace: 12.291
I wanted to essentially center these statistics in the calculator area, but I don't know the width, so I used this:
solWrap.offsetWidth = outputTitles.offsetWidth + outputStats.offsetWidth + "px";
Cool, should work right? It turns out it doesn't and that's because outputStats is HIGHLY greedy and uses more width than it needs, and in fact, it actually uses all the remaining width available.
What can I do? Don't throw Jquery at me. Libraries are nice but I prefer sweet, sweet vanilla.
Edit: This is what I want: http://i.imgur.com/l6l4XD5.jpg
I want that effect, but that was achieved through actually literally setting the width of the solWrap div. Since this calculator is dynamic, I want the width dynamically generated.
New Edit: No one has answered correctly yet.
Here is what is going on:
JavaScript is generating content inside two divs:
Sample Variance: 12.212
Population Variace: 12.291
Div 1 will contain "Sample Variance Populati..."
And the other div will contain the data.
These are inside of the calculator text area which has a width of 400px and are both being displayed as inline-blocks.
The thing is when JavaScript generates this content inside of the divs, it does it corrently for the "sample variance...". It sets the width to the smallest possible value it can have.
But when JavaScript generates the content inside the div for the numbers, it sets the width way bigger than it needs to be and in fact takes up the rest of the area inside the calculator div.
How can I force the div that contains the numbers to be as small as it can?]
SOLUTION: I found a solution. Instead of display: inline-block, I used display: table and set the inner divs to display:table cell and it worked.
Try this:
Live demo
html
<form id="calcForm">
<div id="outercalcTextArea">
<div id="calcTextArea" contenteditable="true">
</div>
</div>
<div id="calcButton"><center><button id="submit" type="submit">Submit</button></center></div>
</form>
css
#outercalcTextArea{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #C9C9C9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset, -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6;
border-radius: 2px 2px 2px 2px;
min-width: 400px;
width:auto;
font-size:12px;
height:200px;
white-space:nowrap;
}
#calcTextArea {
width:100%;
height:100%;
padding: 8px;
padding-left:21%;
box-sizing:border-box;
}
html
<div id="solWrap" class='parentDiv'>
....Child divs
css
.parentDiv {
width: 100%;
text-align:center;
}
.chilDiv {
width: 90%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
I apologize if I'm way off here but why can't you use a table?
<table id="stats_table">
<tbody id="stats_table_body">
<tr>
<td class="title">Sample Variance:</td>
<td class="value">12.212</td>
</tr>
<tr>
<td class="title">Population Variace:</td>
<td class="value">12.291</td>
</tr>
</tbody>
</table>
If you need to create though javascript:
var myStats = [{title: 'Sample Variance', value: 12.212},
{title: 'Population Variace', value: 12.291}];
function makeStatsTable(stats){
var table = document.getElementById("stats_table_body");
stats.forEach(function(stat){
var tr = document.createElement("tr");
var title = document.createElement("td");
title.className = "title";
title.textContent = stat.title;
tr.appendChild( title );
var value = document.createElement("td");
value.className = "value";
value.textContent = stat.value;
tr.appendChild( value );
table.appendChild( tr );
});
}
makeStatsTable( myStats );
Here is a jsfiddle: http://jsfiddle.net/xiondark2008/8X7MZ/
Hi I want to add a border to galleria big image. How can I give that?
I give like this
div.galleria-image img{ border: 5px solid #ccc; }
but it cuts right or bottom border and also shows a top border to the thumbail images.
this is my css file.
.galleria-container{position:relative;overflow:hidden; height:570px; margin-bottom:30px; }
.galleria-thumbnails-container { }
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.galleria-stage{position:absolute;top:10px;bottom:80px;left:0px;right:10px;overflow:hidden;}
div.galleria-stage img { border: 1px solid red; }
.galleria-thumbnails-container{height:65px;bottom:0;position:absolute;left:0px;right:10px;z-index:2;}
.galleria-carousel .galleria-thumbnails-list{margin-left:30px;margin-right:30px;}
.galleria-thumbnails .galleria-image{height:50px;width:60px;background:#fff;margin:0 13px 0 0; float:left;cursor:pointer;}
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2; }
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(images/classic-loader.gif) no-repeat 2px 2px; }
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;}
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;}
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;}
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb; }
.galleria-info-title+.galleria-info-description{margin-top:7px;}
.galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;}
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;}
.galleria-info-link:hover,
.galleria-info-close:hover{opacity:.5; }
.galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0; }
.galleria-image-nav-left,
.galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;}
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover{opacity:1.0;}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 11px;position:absolute;left:0;top:0;height:60px;width:23px;z-index:3;opacity:1.0;}
.galleria-thumb-nav-right{background-position:-578px 11px;border-right:none;right:0;left:auto;}
.galleria-thumbnails-container .disabled,
.galleria-thumbnails-container .disabled:hover{opacity:.6;cursor:default; }
.galleria-thumb-nav-left:hover,
.galleria-thumb-nav-right:hover{opacity:1;/*background-color:#111;*/}
.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right{display:block; }
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right{background-image:url(images/classic-map.png);background-repeat:no-repeat;}
div.galleria-image img{ border: 5px solid #ccc; }
any body knows the solution please help me.
When you call galleria(), set the image_margin option to 2 (note: when I tried 1, the bottom margin was chopped). This is what I use:
$('#gallery').galleria({
autoplay: 5000,
data_source: slides,
pause_on_interaction: false,
transition: 'fade',
image_margin: 2
});
My site's css file has the following definition to add a 1px gray border to the large image:
.galleria-stage img {
border: 1px solid #cccccc;
}
Try adding border: 1px solid red; to div.galleria-image img
div.galleria-image img{ border: 1px
solid red; }
Edit: Seems like CSS above will results in the thumbnails having borders too.
Try this:
div.galleria-stage img { border: 1px solid red; }
You need to show the overflow of the parent div's i had this problem and i added and it worked great
.galleria-container {
overflow: visible !important;
}
.galleria-image, .galleria-stage {
overflow: visible !important;
}
.galleria-stage .galleria-images .galleria-image img {
border: 1px solid #333333;
}
It would appear that the imageMargin option needs to be set to twice what it should be.
http://galleria.io/docs/options/imageMargin/
Like I've been trying to put a 6px border around it, and the bottom kept getting cut off, until I set imageMargin to 12.
If your border is for example 4 px then you should set the image_margin variable to 8, if the border is 8px then set it to 16 (the double since you have two sides).
$('#gallery').galleria({
image_margin: 8
});