I'm trying to replicate the functionality found in this codepen example.
Primarily, I'd like to include this code:
$( function() {
var $wrap = $('#wrap');
var $textarea = $('textarea');
var $dummy = $('.dummy');
function positionTextarea() {
var h = $wrap.height();
var top = Math.max( 0, ( h - $dummy.height() ) * 0.5 );
$textarea.css({
paddingTop: top,
height: h - top
});
}
$textarea.on( 'keyup change', function( event ) {
var html = formatDummyText( $textarea.val() );
$dummy.html( html );
positionTextarea();
}).trigger('change');
// should debounce this
$( window ).on( 'resize', positionTextarea );
});
in a directive. I'll have a textarea with a dummy div nearby with 0 opacity. What's the best way to include this functionality in a directive?
Related
I'm working on a website with 5 slides (background pics + text). I want them to be looped when scrolling down and also when scrolling up. I made it work down, but not up. Please help!
document.addEventListener( "DOMContentLoaded", function() {
var div = document.getElementById( "container" );
div.addEventListener( "scroll", function() {
var max_scroll = this.scrollHeight - this.clientHeight;
var current_scroll = this.scrollTop;
var bottom = 100;
if ( current_scroll + bottom >= max_scroll ) {
var content = document.getElementsByTagName( "content" )[ 0 ];
var current = parseInt( content.dataset.current, 10 );
var section = document.getElementsByTagName( "section" )[ current ];
var new_section = section.cloneNode( true );
content.appendChild( new_section );
content.dataset.current = current + 1;
} } );
} );
I want to know that my resize function is not working properly as I aspected means the problem is when I resize the div ( increase the padding ) and leave it and when I again try to resize it padding shrinks.
Note : I am Increasing the padding not the height.
$( function() {
$( "#resizable" ).resizable({
resize: function( event, ui ) {
var originalHeight = ui.originalSize.height;
var newHeight = ui.size.height;
var pad = 5;
if (originalHeight < newHeight) {
pad = newHeight - originalHeight;
}
$(this).css({'padding': pad, 'height': 200, 'width': 400});
}
});
});
My fiddle link
Yeah #Botimoo seems correct. You should probably consider positioning with something other than padding. But something like this probably is close to what you want if you want to stick with padding
https://jsfiddle.net/6rh7emog/5/
<div id="resizable" class="ui-widget-content">
<div id="wrapper">
<h3 class="ui-widget-header">Resizable</h3>
</div>
$( function() {
$( "#resizable" ).resizable({
aspectRatio: true,
resize: function( event, ui ) {
var originalHeight = ui.originalSize.height;
var newHeight = ui.size.height;
$('#wrapper').css({
'padding': newHeight - 200
});
}
});
});
I created the following code which will dim any image that is not in the center of the window, but it only runs once. I am using onload to make sure I have the images, before manipulating them. I would like to change the opacity to 1 of any image in the middle of the screen.
$(window).on("load", function scrolldim() {
var xHome = window.innerWidth/2;
var yHome = window.innerHeight/2;
var pElement = document.elementFromPoint(xHome, yHome).id;
$( ".mid img" ).not( document.getElementById("#" + pElement ) )
.fadeTo( "slow", 0.3 );
if($( ".mid img" ).attr('id') == pElement) {
$("#" + pElement).fadeTo( "slow", 1 );
}
Then I tried wrapping the call in a when statement, like below, but that didn't work at all.
$.when(ajaxLoad()).done(function(a1, a2, a3, a4){
var xHome = window.innerWidth/2;
var yHome = window.innerHeight/2;
var pElement = document.elementFromPoint(xHome, yHome).id;
$( ".mid img" ).not( document.getElementById("#" + pElement ) )
.fadeTo( "slow", 0.3 );
if($( ".mid img" ).attr('id') == pElement) {
$("#" + pElement).fadeTo( "slow", 1 );
});
It runs only once, because there is no EventListener.(besides onload)
You basically say: "When the document is loaded set the opacity of the images". And that is what jQuery does(only once).
The thing is I don't know WHEN you want this function to be executed.
When a button is clicked?
When new image is loaded?
Every couple of
seconds?
I will give you a simple example:
You want your function to be executed every 500ms(0.5s)
$(window).on("load", function() {
setInterval(scrolldim, 500); //call the scrolldim function every 0.5sec
});
function scrolldim(){
var xHome = window.innerWidth / 2;
var yHome = window.innerHeight / 2;
var pElement = document.elementFromPoint(xHome, yHome).id;
console.log("500");
$(".mid img").not(document.getElementById("#" + pElement))
.fadeTo("slow", 0.3);
if ($(".mid img").attr('id') === pElement) {
$("#" + pElement).fadeTo("slow", 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I need make a element follow another element when dragging, but with delay in the animation, is similar to "Chat heads of facebook's messenger", you know, the bubbles on Android.
This is my jQuery plugin:
// Draggable plugin
(function($) {
$.fn.drag = function(options) {
options = $.extend({
handle: null,
cursor: 'move',
draggingClass: 'dragging',
heads: null
}, options);
var $handle = this,
$drag = this;
if( options.handle ) {
$handle = $(options.handle);
}
$handle
.css('cursor', options.cursor)
.on("mousedown", function(e) {
var x = $drag.offset().left - e.pageX,
y = $drag.offset().top - e.pageY,
z = $drag.css('z-index');
$drag.css('z-index', 100000);
$(document.documentElement)
.on('mousemove.drag', function(e) {
var chats = $($(options.heads).get().reverse());
chats.each(function(i) {
$(chats[i]).css({ left: $drag.position().left - (10*i)});
$(chats[i]).css({top: $drag.position().top});
});
$drag.offset({
left: x + e.pageX,
top: y + e.pageY
});
})
.one('mouseup', function() {
$(this).off('mousemove.drag');
$drag.css('z-index', z);
var window_width = $(window).width();
var window_height = $(window).height();
var head_wpostion = $(options.heads).position().left;
var head_hposition = $(options.heads).position().top;
if( head_wpostion > (window_width / 2) )
{
$(options.heads).animate({left: (window_width-40)+"px"}, 300 );
$(options.heads).animate({left: (window_width-50)+"px"}, 300 );
}
else
{
$(options.heads).animate({left: "-15px"}, 300 );
$(options.heads).animate({left: "-5px"}, 300 );
}
if( head_hposition > (window_height - 50) )
{
$(options.heads).animate({top: (window_height-75)+"px"}, 200 );
$(options.heads).animate({top: (window_height-65)+"px"}, 200 );
}
if( head_hposition < 0 )
{
$(options.heads).animate({top: "15px"}, 150 );
$(options.heads).animate({top: "5px"}, 150 );
}
});
// disable selection
e.preventDefault();
});
};
})(jQuery);
the only way you can do that is if you position the element you want to to be dragged along relevant to the drag-able element.
http://coolcarousels.frebsite.nl/c/50/
The carousel is a click/swipe drag slideshow and it uses the caroufresel.js. I have multiple instances of this carousel, but when I click and drag one of the carousel, ALL the carousels move. I believe its in the JavaScript, but I'm fairly new to this and I cant seem to figure this one out.
So what I want to do is separate each carousel to move individually.
<article class="wrapper">
<div class="caroufredsel">
<ul class="carousel">
<!--CONTENT-->
</ul>
</div>
</article>
This is basic structure and is used multiple times for multiple carousels. Each one is differentiated by itself, but I'm having trouble with implementing the carousel for each one to respond individually.
The initial link at the top shows the original mark up and js.
Appreciate the responses.
Here's the javascript:
// the carousel
var $carousel = null;
// the draggable wrapper
var $wrapper = null;
// the width of one item
var itemWidth = 1280;
// the duration of the scrolling
var scrollDuration = 300;
// dragging-engine
var startDragPosition = false;
function startDrag( event ) {
event.preventDefault();
if ( $carousel.triggerHandler( 'isScrolling' ) ) {
startDragPosition = false;
return;
}
startDragPosition = event.pageX;
$wrapper.bind(
'mousemove',
function( e ) {
$wrapper.css({
'marginLeft': -(itemWidth + startDragPosition - e.pageX)
});
}
);
}
function stopDrag( event ) {
event.preventDefault();
$wrapper.unbind('mousemove');
if ( startDragPosition ) {
var currentDragPosition = event.pageX;
var direction = false;
if ( startDragPosition < currentDragPosition ) {
direction = 'prev';
} else if ( startDragPosition > currentDragPosition ) {
direction = 'next';
}
if ( direction ) {
$carousel.trigger( direction );
$wrapper.animate({
'marginLeft': -itemWidth
}, scrollDuration);
}
}
startDragPosition = false;
}
$(function() {
// the carousel
$carousel = $('.carousel');
$carousel.caroufredsel({
width: 1280 * 5,
height: 638,
align: false,
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: scrollDuration
},
auto: false
});
// make the wrapper draggable
$wrapper = $carousel.parent();
$wrapper.css({
'cursor': 'move',
'marginLeft': -itemWidth
});
$wrapper.bind('mousedown', startDrag)
$wrapper.bind('mouseup', stopDrag)
$wrapper.bind('mouseleave', stopDrag);
});
It's hard to tell exactly what's going wrong as you haven't supplied the HTML for the carousels. But from what I can tell, you're defining the var carousel as anything having the class 'carousel'. Perhaps you need to give each carousel a unique ID and then initialise them separately?