I'm trying to write some JS that will allow HTML such as this:
<div class="box" data-vert-speed="7">ContentDiv1</div>
<div class="box" data-hori-speed="10">ContentDiv2</div>
<div class="box" data-rota-speed="5">ContentDiv3</div>
<div class="box" data-vert-speed="2.4">ContentDiv4</div>
<div class="box" data-hori-speed="1.3">ContentDiv5</div>
<div class="box" data-rota-speed="2.3">ContentDiv6</div>
to perform a CSS transform on each div on page scroll (the rate of which dictated by the attribute value.
where "vert" "hori" and "rota", are the CSS transforms vertical, horizontal and a rotation respectively.
The JS I have works for one of these types but I can't get it to detect all three types of attributes and execute them.
$.fn.moveItrota = function(){
var $windowr = $(window);
var instancesr = [];
$(this).each(function(){
instancesr.push(new moveItItemrota($(this)));
});
window.onscroll = function(){
var scrollTopr = $windowr.scrollTop();
instancesr.forEach(function(instr){
instr.updater(scrollTopr);
});
}
}
$.fn.moveItvert = function(){
var $windowv = $(window);
var instancesv = [];
$(this).each(function(){
instancesv.push(new moveItItemvert($(this)));
});
window.onscroll = function(){
var scrollTopv = $windowv.scrollTop();
instancesv.forEach(function(instv){
instv.updatev(scrollTopv);
});
}
}
$.fn.moveIthori = function(){
var $windowh = $(window);
var instancesh = [];
$(this).each(function(){
instancesh.push(new moveItItemhori($(this)));
});
window.onscroll = function(){
var scrollToph = $windowh.scrollTop();
instancesr.forEach(function(insth){
insth.updateh(scrollToph);
});
}
}
//Rotation Scrolling ------------------------------------------------
if ($('.box').attr('data-rota-speed')){
console.log("found a rota");
var moveItItemrota = function(elr){
this.elr = $(elr);
this.speedr = parseInt(this.elr.attr('data-rota-speed'));
console.log(this.speedr);
};
moveItItemrota.prototyper.updater = function(scrollTopr){
var posr = scrollTopr / this.speedr;
this.elr.css('transform', 'rotate(' + -posr + 'deg)');
};
$(function(){
$('[data-rota-speed]').moveItrota();
});
};
//Horizontal Scrolling ------------------------------------------------
if ($('.box').attr('data-hori-speed')){
console.log("found a hori");
var moveItItemhori = function(elh){
this.elh = $(elh);
this.speedh = parseInt(this.elh.attr('data-hori-speed'));
console.log(this.speedh);
};
moveItItemhori.prototypeh.updateh = function(scrollToph){
var posh = scrollToph / this.speedh;
this.elh.css('transform', 'translateX(' + -posh + 'px)');
};
$(function(){
$('[data-hori-speed]').moveIthori();
});
};
//Vertical Scrolling ------------------------------------------------
if ($('.box').attr('data-vert-speed')){
console.log("found a vert");
var moveItItemvert = function(elv){
this.elv = $(elv);
this.speedv = parseInt(this.elv.attr('data-vert-speed'));
console.log(this.speedv);
};
moveItItemvert.prototype.updatev = function(scrollTopv){
var posv = scrollTopv / this.speedv;
this.elv.css('transform', 'translateY(' + -posv + 'px)');
};
$(function(){
$('[data-vert-speed]').moveItvert();
});
};
What I can tell from your code is that you have 2 data points on the same attribute, I would suggest separate them (if possible). From your code, I assume every element has a single movement type and the movement speed. If there is more than one, this may require a bit of tweaking. If my assumption is correct, you could do something like:
<div class="box" data-movement="vertical" data-speed="7">ContentDiv1</div>
<div class="box" data-movement="horizontal" data-speed="10">ContentDiv2</div>
<div class="box" data-movement="rotation" data-speed="5">ContentDiv3</div>
<div class="box" data-movement="vertical" data-speed="2.4">ContentDiv4</div>
<div class="box" data-movement="horizontal" data-speed="1.3">ContentDiv5</div>
<div class="box" data-movement="rotation" data-speed="2.3">ContentDiv6</div>
Then on js, get the items and apply the css
var boxItems = $(".box");
$.map(boxItems, function(item, i) {
var movement = $(item).data("movement");
var speed = $(item).data("speed");
switch(movement) {
case "horizontal": {
// move horizontally (not sure if this is done with transforms)
break;
}
case "vertical": {
// move vertically (not sure if this is done with transforms)
break;
}
case "rotation": {
// rotate (not sure if this is done with transforms)
break;
}
}
});
I did not write the movement code since not sure if you are using css transform ... but just in case, here is a link that describes how to apply this.
http://www.w3schools.com/jsref/prop_style_transform.asp
Hope this helps.
Related
For now using below javascript, I am getting the lat long values over the mouse pointer. How can I make it appear at the bottom of the cesium screen like it is in google earth.
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true;
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
var result = latitudeString(45);
document.getElementById("demo").innerHTML = result;
} else {
entity.label.show = false;
}
});
Thanks for your help
I assume that you are perhaps running this in Sandcastle? In this case the sites styling makes it a bit difficult to add additional divs. But if you position them absolutely and give a high z-index, you can make the div appear on top of the CesiumViewer container.
Additionally, there were a few problems with a misplaced semicolon inside the entity "mou" label object. And you tried to use the latitudeString as a function call.
Working SandCastle link
HTML
<style>
#import url(../templates/bucket.css);
</style>
<div id="demo" style="z-index: 2000; position: absolute; height:100px; width:200px; right: 10px; bottom: 0px; text-color: white"></div>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
Javascript
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true // Removed semicolon here
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
var result = entity.label.text; // We can reuse this
document.getElementById("demo").innerHTML = result;
} else {
entity.label.show = false;
}
});
[
// Calendar
var calendar = document.getElementById("calendar");
calendar.addEventListener("click",function(){
factbox.style.bottom = "70px";
factbox.style.transition = "0s";
calendar.style.transform = "rotateX(-50deg)";
calendar.style.transformOrigin = "bottom center";
var hotdogs = document.createElement("IMG");
hotdogs.src = "SVG/hotdog2.svg";
hotdogs.setAttribute = ("id", "hotdogs");
everywhere.parentNode.removeChild("hotdogs");
});
// Hotdog
var hotdog = document.getElementById("hotdog");
var everywhere = document.getElementById("everywhere");
var NumClick4 = 0;
hotdog.addEventListener("click",function(){
var hotdogs = document.createElement("IMG");
hotdogs.src = "SVG/hotdog2.svg";
hotdogs.setAttribute = ("id", "hotdogs");
everywhere.appendChild(hotdogs);
var x = Math.floor(( Math.random() * 450) + 800);
NumClick4++;
console.log(x + " " + NumClick4);
hotdogs.style.width = "200px";
hotdogs.style.left = x + "px";
if(NumClick4 == 1) {
factbox.style.bottom = "70px";
factbox.style.transition = "0s";
} else {
}
});
<div id="hotdog" class="">
<img src="SVG/hotdog2.svg" alt="hotdog">
</div>
<div id="everywhere"></div>
<div id="calendar">
<img src="SVG/calendar.svg" alt="calendar">
</div>
<div id="factbox">
</div>
enter image description here
Sorry if my code looks messy. So as shown on the image, I want the hotdogs on the sky, which were created by "CreateElement" and "AppendChild" method to disappear using "RemoveChild" method. For example, when I click other elements like "flag", I want the just the new "hotdogs" to disappear. I think I am not getting how it works. I would appreciate advice and tips.
Following line is wrong by 2 counts
everywhere.parentNode.removeChild("hotdogs");
You are trying to remove something which hasn't been added yet
You need to remove the Element rather than string
i.e.
everywhere.parentNode.removeChild(hotdogs);
var n=0;
var images=["FullSizeRender (1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"];
$(document).ready(function() {
// Change image
$("#himg").click(function(){
n++;
if(n==images.length){
n=0;
};
document.getElementById("himg").src=images[n];
$("#himg").find('img[src="' + images[n] + '"]').fadeOut();
$("#himg").find('img[src="' + images[n+1] + '"]').hide().fadeIn();
});
<div class="col-xs-2">
<div id="handbags">
<h4>Handbags</h4>
<img id="himg" src="FullSizeRender (1).jpg" />
</div>
</div>
I have made an array where images change on click, but I am trying to make the images fade on click instead of sharply changing. I've tried selecting the images by source using the index from the array, but it's not working.
Try this:
$(document).ready(function() {
var n = 0;
var images = ["FullSizeRender(1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"];
var image = $('#himg');
image.on('click', function() {
var newN = n+1;
if (newN >= images.length) { newN = 0 };
image.attr('src', images[n]);
image.fadeOut(300, function () {
image.attr('src', images[newN]);
image.fadeIn();
n = newN;
});
});
});
I am not that a savvy JS developer and I need to fix the below code to make sure the div minimum height is 660px, can someone tell me what do I need to change/add?
<script>
$(window).load(function(){
var innerContainerWidth = $('#content').width();
var innerContainerHeight = $('#content').height();
var outerContainerWidth = $('#main').width();
var sidebar = ((outerContainerWidth - innerContainerWidth)/2)-30;
var rightBarHeight = $("#right-bar").outerHeight(true);
if(innerContainerHeight < rightBarHeight){
$('#content').css( "min-height", rightBarHeight );
}
$("#right-bar").css("width", sidebar);
$("#left-bar").css("width", sidebar);
$("#left-bar").stickyfloat({duration:0});
$("#right-bar").stickyfloat({duration:0});
});
$(window).resize(function() {
var innerContainerWidth = $('#content').width();
var outerContainerWidths = $('#main').width();
var innerContainerHeight = $('#content').height();
var rightBarHeight = $("#right-bar").outerHeight(true);
var sidebarWidth = ((outerContainerWidths - innerContainerWidth)/2)-30;
if(innerContainerHeight < rightBarHeight){
$('#content').css( "min-height", rightBarHeight );
}
$("#right-bar").css("width", sidebarWidth);
$("#left-bar").css("width", sidebarWidth);
});
</script>
use min-height in your css class
.cssClass{
min-height:660px;
}
In my html page I have 2 divs with toggle function.
I need to modify this js to let it close other div when one is open
my js
jQuery( "div.bk-toggle-header" ).click(function(){
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({
height: 'toggle'
}, 'slow', function() {
});
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed');
});
My html
<div class="bk-toggle bk-toggle-closed">
<div class="bk-toggle-header content-separator">
<span class="title">First Tab</span>
<span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap"> content
</div></div>
<div class="bk-toggle bk-toggle-closed">
<div class="bk-toggle-header content-separator">
<span class="title">Second Tab</span>
<span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap" > content
</div></div>
I would appreciate some help to toggle divs one at a time.
Working demo http://jsfiddle.net/f492H/
Solution below will toggle div one at a time. you could play around with other Jquery ways as well !like is(':visible')
API used:
.slideToggle: http://api.jquery.com/slideToggle/
.parents : http://api.jquery.com/parents/
Hope it fits your needs :)
Code
$('.bk-toggle-content-outer-wrap').hide();
$('.title').on('click', function (e) {
$('.bk-toggle-content-outer-wrap').hide();
$(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle();
});
I can offer you an accordion class I've written for a previous project. It's fairly flexible and should accomplish what you're asking and more. Documentation is... non-existent, but I'm happy to answer any implementation questions if you choose to use it.
Here it is in a fiddle: http://jsfiddle.net/YjAgb/1/
UPDATE:
Here is another fiddle working with your html structure: http://jsfiddle.net/WfWEP/
And, for the sake of being thorough, here's the demo code.
HTML
<div id='accordion'>
<div class='accHead'>Head 1</div>
<div class='accBody'>Body 1</div>
<div class='accHead'>Head 2</div>
<div class='accBody'>Body 2</div>
<div class='accHead'>Head 3</div>
<div class='accBody'>Body 3</div>
</div>
JavaScript
function accordion(options){
this.index = options.index;
var openChild = false;
var self = this;
var cEvent = {};
var slideSpeed = 200;
var headClass = '.accHead';
var bodyClass = '.accBody';
var $parent = options.parent;
var $heads = $parent.find(headClass);
var $bodies = $parent.find(bodyClass)
$heads.on('click', function(e){
var headClicked = $heads.index($(this)) + 1;
var wasTriggered = (!e.clientX);
var previousOpen = (headClicked == openChild) ? headClicked : openChild;
var newOpen = (headClicked == openChild) ? false : headClicked;
$heads.add($bodies).removeClass('on');
if (!openChild) {
var type = 'open';
} else if(headClicked == openChild) {
var type = 'close';
} else {
var type = 'swap';
}
cEvent = { clicked: headClicked,
triggered: wasTriggered,
previousOpen: previousOpen,
openChild: newOpen,
headElement: $(this),
bodyElement: $bodies.index(headClicked - 1),
type: type,
accordion: self
};
options.click_callback(cEvent);
if (openChild) closeLevel((headClicked == openChild) ? headClicked : openChild);
if ((!openChild) || (headClicked != openChild)) openLevel(headClicked);
openChild = newOpen;
});
var openLevel = function(levelId)
{
var $bodyEl = $bodies.eq(levelId - 1);
var $headEl = $heads.eq(levelId - 1);
cEvent.bodyElement = $bodyEl;
cEvent.headElement = $headEl;
$headEl.addClass('on');
$bodyEl.addClass('on').slideDown(slideSpeed, function(){
options.open_callback(cEvent);
})
}
var closeLevel = function(levelId)
{
var $bodyEl = $bodies.eq(levelId - 1);
var $headEl = $heads.eq(levelId - 1);
cEvent.bodyElement = $bodyEl;
cEvent.headElement = $headEl;
$bodyEl.slideUp(slideSpeed, function(){
options.close_callback(cEvent);
});
}
this.closeAll = function()
{
$heads.add($bodies).removeClass('on');
$bodies.slideUp(0);
return this;
}
this.click = function(levelId, caller)
{
if(caller.index != this.index) $heads.eq(levelId - 1).trigger('click');
}
this.getHead = function(levelId)
{
return $heads.eq(levelId - 1);
}
this.getBody = function(levelId)
{
return $bodies.eq(levelId - 1);
}
this.getParentAcc = function()
{
return $parent;
}
}
newAcc = new accordion({
parent: $('#accordion'),
click_callback: function(){},
open_callback: function(){},
close_callback: function(){},
})
.closeAll();