.div_wrap_p_bestgames {
display: table;
width: 130px;
height: 40px;
float: left;
background: #1B1C1E;
position: relative;
margin-top: 150px;
margin-left: -100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
this is css code.
I want to set div_wrap_p_bestgames's mouseout function
if condition with background color #1B1C1E
function onMouseoutNewGames() {
if (document.getElementById("div_wrap_p_newgames").style.background == "#1B1C1E")
///do something
}
this condition is not working
You will need to use the below line to get the background color of an element
document.getElementById("div_wrap_p_newgames").style.backgroundColor
if you need to compare this with a specific value, convert your hex code to a rgb value and compare it as such,
if(document.getElementById("myDiv").style.backgroundColor == "rgb(27, 28, 30)")
rgb(28,27,30) is the equivalent of #1B1C1E
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
<div id="myDiv" style="background-color:#1B1C1E;">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Get the background color of div</button>
<script>
function myFunction() {
if(document.getElementById("myDiv").style.backgroundColor == "rgb(27, 28, 30)")
{
alert("hi");
}
}
</script>
</body>
</html>
Works fine when I try it.
Hi I have the following foundation codepen:
https://codepen.io/ianims/pen/PmoqBZ
code:
$(document).ready(function () {
$(document).foundation();
});
body {
background-color: #a3d5d3;
}
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
/* width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
color:#ffffff;
margin-left: 70%;
position: absolute;
width:250px;
height:60%;
top: 0;
bottom: 0;
background: black;
opacity:0.5;
padding :20px;
}
<div class="row fullWidth">
<div class="large-12 columns">
<div id="wrap">
<div id="text">
<br /><br /><br /><br />
<h3>MCA Coding and MLC Compliance</h3>
<p>
This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side.
</p>
</div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
</div>
</div>
</div>
On a large screen it works ok -- I want the text overplayed on the image over to the right - but if you shrink the screen down the text starts to disappear off to the right -- anyone any ideas how to keep it consistent on all screens???
thanks
It's better to position using the left: position as opposed to margin. You might also want to delete the height property so it accomodates more content.
#text {
padding-top: 2em; /*replaces the <br>s in your html*/
color: #ffffff;
position: absolute;
width: 250px;
/*height: 60%;*/
top: 0;
right:7.5%; /* instead of margin*/
background: black;
opacity: 0.5;
padding: 20px;
}
I made a codepen demo:
https://codepen.io/kemie/pen/pPoqOv
I am trying to create two divs using foundation.
I used this code:
<div id=”containerLeftWrap” class=”small-4 small-centered medium-offset-2 medium-2 medium-uncentered columns” >
…content…
</div>
<div id="containerRight" class="medium-7 columns">
<div id="aboutArea">
…content…
</div>
</div>
In small size it looks fine
but in the medium and large size it looks like this
instead of like this
I've tried to add:
style=”display:inline-block; vertical-align:top”
But then the first div (the smaller one) was stuck to the left side, in all sizes, like this:
Does someone have an idea how to solve this?
Thank you!!!!
Update:
I have this css:
#containerLeftWrap {
background-color: #262626;
height: 256px;
min-width: 245px;
padding-top: 28px;
border-radius: 7px;
margin-top: 60px;
}
#aboutArea {
width: 90%;
margin: 0 auto;
background-color: #262626;
border-radius: 7px;
padding-bottom: 15px;
}
Looking through http://foundation.zurb.com/docs/components/section.html, is there anyway I can add horizontal scroll for Section headers ( Tabs) . I am looking something like http://www.seyfertdesign.com/jquery/ui.tabs.paging.html in foundation sections with horizontal scroll and continue to use accordion in small screen
I found a solution for those interested : https://codepen.io/gdyrrahitis/pen/BKyKGe
.tabs {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
.tabs-title {
float: none;
display: inline-block;
}
}
if someone needs an angularjs with jquery implementation, below code can help you, for pure jquery replace angularjs directive method with a native js method with respective attributes.
I tried to search for similar implementation but found nothing, so I have written a simple angular directive which can transform a foundation CSS tabs to scrollable tabs
angular.module("app.directives.scrollingTabs", [])
.directive("scrollingTabs", ScrollingTabsDirective);
//#ngInject
function ScrollingTabsDirective($timeout, $window) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if(attr.scrollingTabs == "true"){
element.addClass('scrolling-tabs-container');
element.find('.nav-buttons').remove();
element.append('<div class="scrolling-tabs nav-buttons nav-buttons-left"></div>');
element.append('<div class="scrolling-tabs nav-buttons nav-buttons-right"></div>');
let scrolledDiv = $(element).find('.tabs');
let scrolled;
let scrolling;
let scrollFn = (step, animationTime, cb) => {
scrolled = Math.max(scrolled + step, 0);
scrolledDiv.animate({
scrollLeft: scrolled
}, animationTime, ()=>{
if (scrolling) {
scrollFn(step, animationTime, cb)
}else{
if(cb){cb()}
}
});
};
let checkActiveNavButtonsClasses = () => {
scrolled = scrolledDiv.scrollLeft();
let scrollWidth = scrolledDiv.get(0).scrollWidth;
let scrolledDivWidth = scrolledDiv.get(0).clientWidth;
if(scrollWidth > scrolledDivWidth){
element.addClass('nav-active');
scrollWidth = scrolledDiv.get(0).scrollWidth;
if(scrolled == 0){
element.removeClass('nav-active-left').addClass('nav-active-right')
}else if(scrolled > 0 && scrolled + scrollWidth < scrolledDivWidth){
element.addClass('nav-active-left').addClass('nav-active-right');
}else if(scrolled > 0 && scrolled + scrollWidth >= scrolledDivWidth){
element.addClass('nav-active-left').removeClass('nav-active-right');
}else{
element.removeClass('nav-active-left').removeClass('nav-active-right')
}
}else{
element.removeClass('nav-active-left').removeClass('nav-active-right').removeClass('nav-active');
}
};
let scrollToActiveTab = () => {
let activeDD = scrolledDiv.find('dd.active');
let tabsOffset = scrolledDiv.offset();
let activeTaboffset = activeDD.offset();
let activeTabwidth = activeDD.width();
let scrolledStep = activeTaboffset.left - tabsOffset.left - scrolledDiv.width() + activeTabwidth;
scrollFn(scrolledStep, 100, checkActiveNavButtonsClasses);
};
element.find(".nav-buttons.nav-buttons-left")
.off("click.scrolling")
.on("click.scrolling", (event)=>{
event.preventDefault();
scrolling = false;
scrollFn(-100, 100, checkActiveNavButtonsClasses);
})
.off("mouseover.scrolling")
.on("mouseover.scrolling", function (event) {
scrolling = true;
scrollFn(-2, 1, checkActiveNavButtonsClasses);
})
.off("mouseout.scrolling")
.on("mouseout.scrolling", function (event) {
scrolling = false;
});
element.find(".nav-buttons.nav-buttons-right")
.off("click.scrolling")
.on("click.scrolling", (event)=>{
event.preventDefault();
scrolling = false;
scrollFn(100, 100, checkActiveNavButtonsClasses);
})
.off("mouseover.scrolling")
.on("mouseover.scrolling", function (event) {
scrolling = true;
scrollFn(2, 1, checkActiveNavButtonsClasses);
})
.off("mouseout.scrolling")
.on("mouseout.scrolling", function (event) {
scrolling = false;
});
$timeout(()=>{
checkActiveNavButtonsClasses();
scrollToActiveTab()
},1000);
$($window).off('resize.scrolling').on('resize.scrolling', _.debounce(()=> {
checkActiveNavButtonsClasses();
}, 500));
scope.$on('$destroy', function() {
$($window).off('resize.scrolling');
});
}
}
}}
css:
.scrolling-tabs-container {
position: relative;
.tabs {
overflow-x: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
display: block;
margin-right: 18px;
dd {
display: inline-block;
float: none;
margin: 0px -3px 0px 0px;
}
.tabs-title {
float: none;
display: inline-block;
}
}
.scrolling-tabs {
&.nav-buttons {
display: none;
position: absolute;
width: 19px;
height: 38px;
border: 1px solid #c1c1c1;
top: 1px;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0.4;
cursor: pointer;
&:hover {
opacity: 1;
&:before {
color: #444;
}
}
&:before {
position: absolute;
left: 7px;
top: 8px;
color: #777;
}
&.nav-buttons-left {
left: 0;
&:before {
content: '<';
}
}
&.nav-buttons-right {
right: 18px;
&:before {
content: '>';
}
}
}
}
&.nav-active{
.tabs{
margin-right: 36px;
margin-left: 18px;
}
.scrolling-tabs {
&.nav-buttons {
display: inline-block !important;
}
}
}
&.nav-active-left{
.scrolling-tabs{
&.nav-buttons-left{
opacity: 0.8;
}
}
}
&.nav-active-right{
.scrolling-tabs{
&.nav-buttons-right{
opacity: 0.8;
}
}}}
HTML: Foundation Tabs template.
<tabset class="list-tabs" scrolling-tabs="true">
<tab heading="tab1"></tab>
<tab heading="tab2"></tab>
<tab heading="tab2"></tab>
</tabset>
Before you start you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. These come with foundation package so just uncomment them in your footer or include them accordingly.
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
The foundation documentation has all of the information for this :
http://foundation.zurb.com/docs/components/section.html#panel2
This will get you your section tabular headers. You then want to manage the content to be scrollable.
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
This content here will be the area to work on, try adding a new class called .scrollable
Within this class use something like:
.scrollable{
overflow:scroll;
}
You may want to add some more to this however this will get you started. Your HTML should now look like this :
<div class="content scrollable" data-section-content>
<p>Content of section 1. This content will be scrollable when the content has exceeded that of the div size. </p>
</div>
This this is what you are looking for.
Animation using hardware acceleration CSS3 tags (see code below) works well in Google Chrome PC browser and Android browser on Samsung Galaxy SIII. However, the same does not work on Android browser on Samsung Galaxy Tab 10.1. How to realize hardware accelerated slide in/out animation on Samsung Galaxy Tab device?
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
border: 1px solid black;
background-color: red;
position: fixed;
left: 0px;
}
#div1.active
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(-100px,0px,0px);
}
#div1.inactive
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(0px,0px,0px);
}
#button1
{
position: fixed;
left: 200px;
}
</style>
<script>
var flag = 1;
function myFunction()
{
if (++flag % 2 === 0) {
//alert("active");
document.getElementById("div1").setAttribute("class", "");
document.getElementById("div1").setAttribute("class", "active");
} else {
//alert("inactive");
document.getElementById("div1").setAttribute("class", "");
document.getElementById("div1").setAttribute("class", "inactive");
}
}
</script>
</head>
<body>
<div id="div1">HELLO</div>
<button id="button1" onclick="myFunction()">Click me</button>
</body>
</html>
Kind regards,
Vinaya