I have done this before, but it currently is not working and i cant figure out why. I would like the first h1 to rotate on hover just slightly. Here is my code
http://jsfiddle.net/YLXtd/1/
html
<div id="headLine">
<h1 class="fitText"><span class="highLight">Austin Kitson</span></h1>
<h2 class="fitText"><span class="highLight">Marketing & Sales</span></h2>
</div>
</section>
css
#headLine {
position: relative;
top: 10em;
margin-left:auto;
margin-right:auto;
width:100%;
text-align:center;
}
#headLine .fitText {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
padding:1em;
}
#headLine .fitText:hover {
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg); }
#headLine .highLight {
background: rgba(151, 173, 191, 0.7);
padding: 0.3em;
color: #ebe6e0; }
ha, turns out I forgot the vendor prefix for safari -webkit-transform: rotate(3deg); and I am using safari, silly me. I do this stuff all the time.
Use this code :
It worked form me
#headLine .fitText {
-webkit-transition: 1.5s all ease;
-moz-transition: 1.5s all ease;
-o-transition: 1.5s all ease;
transition: 1.5s all ease;
}
.fitText:hover {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Here is the link http://jsfiddle.net/YLXtd/7/
Related
I just want to play the mp3 when the image tracking is turned on, and stop the sound
What currently works is that after recognizing the nft, the model comes out well
but the sound doesn't play
Play and pose sound when image tracking is on with AR.js
I used the code in this link, but it doesn't seem to work due to my lack of skills
The link was intentionally deleted (a-assets,a-nft,a-entity)
please give me any advice. Thanks
'''
<script>
AFRAME.registerComponent('soundhandler', {
tick: function () {
var entity = document.querySelector('sound');
if (document.querySelector('a-nft').object3D.visible == true) {
entity.components.sound.playSound();
} else {
entity.components.sound.pauseSound();
}
}
});
</script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin: 0px; overflow: hidden">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
cursor="rayOrigin: mouse"
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
gesture-detector
id="scene"
>
<a-assets>
<a-asset-item src="https.mp3"
preload="false" id="sound" response-type="arraybuffer" loop
crossorigin webkit-playsinline autoplay="false" playsinline>
</a-asset-item>
</a-assets>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="https:rogoqr"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-sound src="#sound"></a-sound>
<a-entity
gltf-model="https:.glb"
scale="2 2 2"
position="100 -20 -115"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
sound="src: #sound" autoplay="false"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>
</script>
</body>
'''
please give me any advice. Thanks
.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.
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;
}
Hi I want to have a dropdown list in my django form with a checkbox in front of every option in the drop down. I have tried using multiple choice field with selectmultiple widget but this displays every option with checkboxes on the page. They are not contained inside the drop down. is there a way to contain them inside the dropdown?
I see that you asked this four years ago so I doubt you are still looking for an answer, but I might as well provide in case someone else finds it!
Basically you want to make a div with an unordered list inside of it, where each item in that list contains a checkbox input.
Then, you use jQuery so that when you click on the div, it gets assigned the 'selected' class in its html.
Then you make your CSS so that the dropdown menu itself only shows up when it has the 'selected' class.
The JSFiddle is here (minus the django templating, obviously):
https://jsfiddle.net/lymanjohnson/2L71nhko/15/
And code is below:
HTML (django template):
<fieldset class="item toggle-item">
<div class="legend-container">
<legend>Choices</legend>
</div>
<ul class="scrollable-dropdown-list">
{% for choice in choices %}
<li>
<input type="checkbox" class="custom-control-input filter" id="choice_{{forloop.counter}}" name="choice" value="{{choice}}">
<label for="choice_{{forloop.counter}}"class="custom-control-label">{{choice}}</label>
</li>
{% endfor %}
</ul>
</fieldset>
JQUERY:
<script>
$(document).ready(function() {
// Listener for when you click on the dropdown menu
$('fieldset.toggle-item > .legend-container').on('click', (event) => {
// Adds or removes the 'selected' attribute on the dropdown menu you clicked
$(event.currentTarget).parent().toggleClass('selected')
// If you have multiple dropdown menus you may want it so that when you open Menu B, Menu A
// automatically closes.
// This line does that by removing 'selected' from every dropdown menu other than the one you clicked on.
// It's 'optional' but it definitely feels better if you have it
$('fieldset.toggle-item').not($(event.currentTarget).parent()).removeClass('selected')
})
// The user is probably going to expect that any and all dropdown menus will close if they click outside of them. Here's how to make that happen:
//This listens for whenever you let go of the mouse
$(document).mouseup(function(e)
{
// make this a variable just to make the next line a little easier to read
// a 'container' is now any
var dropdown_menus = $("fieldset.toggle-item");
// if the target of the click isn't a dropdown menu OR any of the elements inside one of them
if (!dropdown_menus.is(e.target) && dropdown_menus.has(e.target).length === 0)
{
// then it will de-select (thereby closing) all the dropdown menus on the page
$('fieldset.toggle-item').removeClass('selected')
}
});
})
</script>
CSS:
<style>
.item {
width: 33%;
margin: 2px 1% 2px 1%;
border: 0;
}
.item li {
list-style: none;
}
.scrollable-dropdown-list{
position: absolute;
max-height:200px;
width:33%;
overflow-y:scroll;
overflow-x:auto;
margin: 0;
padding-left: 1em;
border-style: solid;
border-width: thin;
border-color: grey;
background-color: white;
}
legend {
margin-bottom: 0;
font-size: 18px;
}
label {
font-weight: normal;
margin-left:20px;
}
.legend-container {
cursor: pointer;
width: 100%;
display: flex;
padding: 0;
margin-bottom: 0px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: none;
}
fieldset {
border-width: thin;
border-color: gray;
border-style: solid;
width:50px;
}
/* Note that all the browser-specific animation stuff is totally optional, but provides a nice subtle animation for the dropdown effect */
fieldset ul.scrollable-dropdown-list {
display: none;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
fieldset.selected ul.scrollable-dropdown-list {
display: block;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-10%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
</style>
Dropdowns and checkboxes are HTML elements that are rendered by the browser using its built-in components. Those components don't have any support for combining them: in pure HTML, you simply can't combine a select with a check box.
The only way to do this would be to use components rendered purely in Javascript. Google's Closure UI tools is one set of controls I've used, but only because I used to work at Google: something like jQuery UI might have a version that's easier to use.
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.