First time poster, but I've used the site for quite a while and I've usually found the answer here somewhere. In this instance however I'm forced to actually ask.
JS is not my strong point so please bear with with. We have a web based application that has dashboard items. These are essentially divs which have specific content in them for that user (eg holiday, alerts, messages, etc). I've implemented Masonry to close up the white space as they all float naturally (no left and right columns).
The problem lies in that some of the dashboard items expand to show more data (this is currently handled by AJAX). Because Masonry fixes the height of the container and other elements this break the layout with elements going behind others rather than making more space.
Is there a way for items to move only vertically or maybe a means of telling Masonry that certain items should always be on the right or left?
Regards
<!-- Masonry --->
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script>
$(function(){
$('#Dashboard').masonry({
itemSelector: '.DashboardItem',
columnWidth : 480,
isResizable : true
});
});
</script>
You'll probably have to call $('#Dashboard').masonry() yourself after resizing the items so that Masonry will reposition them. Usually it only does that when the browser's window resizes.
Related
I'm developing a scaling web page with three image-based layers of parallax scrolling. Only the first two layers are set up with parallax javascript. The third layer is set at normal scroll speed 0, so it doesn't require any scroll speed modification.
My problem is that when the page is reloaded (on Firefox, at least) when you aren't at the top of the page, those two layers load in the wrong place, but then correct themselves once you start scrolling.
I believe the problem has something to do with the position attribute. Changing to "relative" has the same effect, changing to "fixed" has a similar effect (except on reloading, the layers act like the top of the viewport is the top of the page), and having no position attribute causes them to not be layered and not have a parallax scrolling effect.
This is the javascript I'm using for the parallax effect:
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*-0.7)+'px');
$('.stairs').css('top',-(scrolled*-0.5)+'px');
}
And here's a simplified version of my page with placeholder graphics on a jfiddle: http://jsfiddle.net/4spur9ch/
You can see what I mean by slightly scrolling down, then right clicking inside the result box, then going to This Frame > Reload Frame
This is the last kink that needs to be worked out before I can continue. Any help would be greatly appreciated.
Edit: It's possible it could have something to do with the 'top' in the javascript, but removing it causes problems.
$(window).scroll(function(e){
parallax();
});
/*Needed to add this line:*/
$(window).trigger("scroll")
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*-0.7)+'px');
$('.stairs').css('top',-(scrolled*0.3)+'px');
}
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.
How do I make elements draggable between two divs? This seems to be something that draggables should do. But I haven't been able with the code I have. In this jsfiddle I have two divs with draggable elements. I want to get one element to go from the first div to the second div. That functionality must exist on many web sites.
Here is the jsfiddle with the code.
http://jsfiddle.net/gkvgn/9/
I have asked before and thought that someone would know how to have that functionality. If the code I have isn't the right way, how do I define an element and the draggable containment option to be able to have that functionality.
There's a similar Stack Overflow question that was answered here:
jquery ui draggable elements not 'draggable' outside of scrolling div
I implemented the above solution on my own project and it worked beautifully.
I agree that it does seem like if you set the containment to window or document, cross-div dragging should be allowed. I imagine that you'd prefer overflow to stay hidden due to the amount of content you want to keep in your divs.
Finally found the problem. Specifying overflow: hidden; for the container div restricts the draggable area to the container only. If I remove that specification from the styles. The elements are draggable across the divs. Here is the fiddle with the fix.
http://jsfiddle.net/gkvgn/10/
I could drag draggables from a scrollable div into a different non-parent when I stopped trying to use jquery. I ended up using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
I'm new to webkit animations and I have been trying out to do this kind of animation
http://demo.jeffrey-way.com/tutsMobile/#site.php?siteName=psdtuts
If you click the list element you will see page sliding in and sliding out.
I want to implement this animation to my app which is built with backbone.js, underscore.js, zepto.js
I could use jqTouch or jquery mobile but I would like to make it as light weight as possible, because I'm building it only for IOS. So thats way I wan't to implement it by my self.
Any hints to make this implementation or should I go with jqTouch?
In this example, there is some sort of (I hate to be vague...) ajax based content loading system. Take a look at the source:
<div data-role="page" id="article.php?siteName=psdtuts&origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">
When you first visit, that div doesn't exist. It's created by javascript when content is required, then filled with that content, then translated (animated) into the viewport.
Here is a step by step, deduced from a quick look at the page:
Base page is loaded, including css, javascript, nav list
Script is waiting for a nav item to be clicked.
Upon clicking, an ajax request is made to the content corresponding to the clicked item; determined by href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081". My guess? This ajax request is getting content from the same place as psdtuts.com, likely in a database.
While that stuff is loading, javascript shows a loading animation. When loading is complete, it's hidden again.
Once the new content-filled div is created, it is given a default position with its left edge placed right outside of the right edge of the screen. Upon the event of being positioned, javascript then determines the view's dimensions and translates the div across the horizontal dimension. At the same time, the nav list is moved the same direction and distance.
When back is clicked, the view's dimensions are determined again (In case the window size changed) and the nav and content are translated to the right, hiding the content and showing the navigation again.
Repeat
I could be off from how this exact sample is being done, but... Well, this would work.
You wouldn't be that crazy to use a framework for something like this, but I can understand wanting to do a custom job. It would certainly be faster for users, but slower for you. Depending on your intent, that would be just fine.
edit: If you're only serving this to users with webkit, using a framework is even less necessary... If you're not worrying about cross browser support, there's really not a lot going on here that you couldn't accomplish easily with raw javascript.
The only reason I use jQuery for example, most of the time, is to ensure things work alright in most use cases. It just smooths so many things out... Even if 95% of the framework isn't being utilized, it's worth it when you've got a deadline.
I founded out one good example
http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application
Is there a way to keep the "Loading..." graphic from appearing when cfdiv refreshes? I'd like to prevent the flicker of loading the graphic then loading the new html.
By adding these lines at the bottom of the header, it overwrites the "Loading..." html and seems to prevent the flickering effect in both IE and FireFox:
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
While this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a per page or per control basis. Hopefully they add support for that in ColdFusion9.
I don't think there is currently a way to do this programmatically within the cfdiv tag. If you really want to get rid of that "Loading..." message and the image, there are a couple places you can look.
You can rename or delete the image, which is located at: CFIDE\scripts\ajax\resources\cf\images\loading.gif
That only gets rid of the animation. The "Loading..." text can be blanked out to an empty string, and is defined in: CFIDE\scripts\ajax\messages\cfmessage.js
Making these changes will obviously have an impact on tags other than cfdiv, but if you are looking to eliminate this behavior in one place, I'm sure you won't mind killing it everywhere else too. :)
I'd love to see a cleaner way to do this if anybody else has any ideas.
This is by no means a comprehensive or an elegant solution, but I found using negative margins on adjacent elements can "cover" the animation. I don't know if this method works in all cases, but for my particular case it worked. The animation appeared next to a binded text field, to the right of which was a submit button. The layer was floated to the right. I used negative margin on the submit button and it covered the animation without affecting the layer alignment.
Another measure I did was to check the layer structure, and added the following code to my css be sure:
#TitleNameloadingicon {visibility:hidden;}
#TitleName_cf_button {visibility:hidden;}
#TitleNameautosuggest {background-color:#ffffff;}
You can create functions to change the message prior calling the ajax load that can set the message and image to a new value.
function loadingOrder(){
_cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>";
}
function loadingNavigation(){
_cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>";
}
(these will eventually be rolled into a single function that will take both a text_value and an image_path parameter)
In some of my processes that load both a main and left nav cfdiv I use a function like this:
function locateCreateOrder(){
loadingOrder();
ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content');
loadingNavigation();
ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu');
}