Our team already develop a web page using custom div, css and Split.js the to produce the following layout. There are 3 panels in the layout with each panel can be resize (notice the gutters).
Problem is, when using mobile the layout is not responsive - and we still do a lot of r and d for this.
I'm looking for alternative, which is Bootstrap framework. But so far, still don't figure out how to do this. Is there something I miss, or bootstrap is not the right choice?
I know this JQuery Resizable Plugin works for this purpose on mobile:
https://github.com/RickStrahl/jquery-resizable
I built a component for this purpose a while ago. The concept is to split any view (html element) into two, one has a fixed width/height and the other consumes the rest of the parent. If you put an optional divider in between the two views, you are able to drag and drop it to resize.
https://www.npmjs.com/package/split-view
Let me know if it works for your case.
Related
I am trying to create dynamically resized panels with react and foundation. I have tried react-split-pane and other similar libraries, but they are messing with the responsiveness of the page. I also tried the resize css3 property but it is not flexible as it only allows the containers to be resized only to the right and bottom and I was unable to style the resize handle to be a horizontal or vertical bar.
Any suggestion would help.
This will be possible with react-resizeable once pull request 76 gets handled.
For now, you can grab the code from the fork.
I need to create parallax floating gallery - when I scroll the page, images move relative to each other and the parent container, from bottom to top of the page visible area. Here's an example on another site (section - sockstagram). Basically, I need to create exactly the same effect. I've already tried to do this using the same library the mentioned example uses - Skrollr. However, it's buggy - causes issues in Safari desktop and mobile (breaks layout of some other elements on the page). Can someone point me in right direction? jQuery plugin or some custom code to achieve this. Thanks ahead.
You can use parallax.js or even a framework like MaterializeCSS which has one implemented and adds also the benefits of having a grid-based framework to design your web.
I'm taking a look to this website http://planetshine.net/demo/regolith-wp/ trying to understand how the horizontal layout is obtained.
I'm just trying to disable the javascript libraries one by one (I want to identify those essential fot the layout and those less important). And beginning to disable only the "buttons.js" library the layout already changes (for example, the vertical scroll bar appears). I would understand why this script "buttons.js" is so influential for the layout.
Some CSS styles may be added by javascript after a page is loaded. This often occurs in plugins: sliders, custom scrollbars etc. You need to inspect places, where this happens and find out, which classes or html elements disappear. Then you can recreate them manually and the whole page will work as expected.
I am looking to create an image that is responsive but also expandable. I need to do this all in HTML/CSS and utlize either Javascript or JQuery to make it expandable. I'm able to do either an expandable unit, or a responsive image - but having a hard time combining the two things. Could use some examples or guidance.
So the example scenario would be, on intial page load there is a 924x70 across the page (that is responsive). If you click that unit it expands to 924x250 (this unit also needs to be responsive) - is this even possible?
Thanks in advance!
You could use responsive design through media queries to control the initial image size. Then use jquery to adjust the size on click.
Here is a basic example that uses the mouse hover to change the image size. Adjusting the window size will trigger the media queries, but you will need to do this before mouse hover. It should be a straight forward task to adjust this base example to your needs.
basic html
<img src="theImage" />
media query
#media screen and (max-width:300px){
img{width:200px;}
}
jquery
see demo
hope this helps...
Is there a good Javascript library for generating an automatically scrolling list like the "Top Tweets" on the Twitter homepage? Preferable as jQuery plugin. It should also support AJAX functionality (to add new list items dynamically).
As we were not really satisfied with the existing solutions we implemented one from scratch. Our solution is a fully jQuery UI compatible ticker plugin (also compatible with their theming framework) and fully unit tested. We didn't yet have the time to test it under every browser, so feedback is welcome (for problems please open issues on the below Github project site).
A special styled demo (Twitter like) is available here.
The main main repository can be found here (ticker branch). There are several options to customize the ticker (documentation at the above mentioned Github repository).
Screenshot:
Here is a nice solution: Scrolling List
Try http://www.htmldrive.net/items/demo/38/Multi-purpose-slideshowtext-scrollerimages-scroller-jquery-plugin
That is the best solution I was able to find:
Scrolling List
If you want to write your own, make a div of fixed width/height, with overflow: hidden, then create another div inside it, with the position: relative property, filled with content from your feed (twitter posts, or similar, etc). Then, when the page loads just make the inner div's top: CSS value change (if you want the list to scroll up, the top value should decrement from zero).
I doubt this helps, but it is quite a good, simple way to get a scrolling without using a jQuery plugin.