javascript / jquery slider(carousel) - javascript

I'm creating an iphone (web)app.
If user slides tumb left it has to show the settings panel, after modifying settings, user drags thumb to the right and the normal app screen comes back.
However I took as basis some carrousel code which needs (minimal) 3 pages, I only want 2 pages.
Current state:
http://jsfiddle.net/U92wt/
I can't remove the red page without breaking everything....
Edit:
More information about code used here.

I tried cruising through your code but I couldn't identify exactly what the issue was. It's a good idea and I felt like playing around with it so I wrote an implementation that is capable of only two panels that you're welcome to use if you wish.
http://www.netortech.com/plugins/swiper.htm
If you like it please give me a vote on the jQuery website!
http://plugins.jquery.com/project/CarouselSwiper

Related

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

z-index for jquery object issue

First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}

Scroll div with "middle button" mouse instantly

I want to implement navigation in a website using the middle button function of scrolling ("clicking" (please re-read clicking) the middle button and roaming around the borders) but I would like this to happen instantly without the need for user input. Something of the kind:
$(element).mouseover(function(){
roamAround(); //I've tried SIMULATING (NOT <--- DETECTING)
//a middle-click from the mouse but failed
});
I am currently using google-chrome and at this stage of development I am not really concerned about cross-browsing this function. If it should work on chrome then it's fine.
What would be the best way to do this using native functions or emulation? Thank you very much!
EDIT: I don't want to DETECT user input, please re-read the question :)
Sounds like you want, like Deryck said, infinite scrolling. There's a jQuery plugin jScroll that does a simpler version for vertical content that can either be auto-loaded or loaded by a button press. You can view the code on Github to see how to do something similar, i.e. your roamAround function could mimic the _load function found there.

Custom android spinner/picker

I'm trying to add an android-like spinner to my mobile website. To put everyone in context the site is access via a WebView in an android application not from the phone/tablet browser.
Now the problem is adding a nice jQuery android-like spinner or spawning a native control that looks something like this:
Follow this link for image. Image taken from my phone on the Google calendar app.
I really don't want the solution posted here.
For several reasons:
- the plus button on top and bottom looks awful
- doesn't apply for other types of spinners that I have such as states (FL, CA, etc).
- I might need one, two or three spinners depending on the case
All those conditions completely discard the native DatePicker and I don't know if it's possible to get rid of the + things in it to make it look like the image above. If the case, that wouldn't solve the problem for the state spinner.
We also have an iPhone version of the app and we use cubiq spinning wheel but i don't want iPhone look-n-feel for the android version.
Thanks!
This one looks like a promising solution but I haven't tried yet.
http://mobiscroll.com/

Create simple website with left menu and right content

I hope to create a website simple website with:
Left menu with items to click
When each item clicked, right menu is changed with new content. The content is always: title, picture 1, text description, picture 2. Same format for all left menu items.
Ideally I want the page to be just 1 page, without frame or separate .html files. If the item is clicked, jQuery will change the photos on right side with photo url in some array.
Is there an easy way to create this with existing templates somewhere? Either from internet, Wordpress (without database), Dreamweaver, or Dreamweaver plug-in... I just want to avoid having to do from scratch.
If you imagine this right, it could be just like a help page from MSDN, IBM or Apple Developer website. Just don't want to do each html separately due to potential change in format later.
Thanks.
Basically, each "page" should be placed in a div that is hidden with css. jQuery can show and hide the divs with a variety of effects.
I have created a simple example for you here:
http://jsfiddle.net/RLdmZ/2/
Whilst the exact specifications you require may not exist already, there are other options in jQuery.
Notably, a search for a 'jQuery gallery' returns many options varying in design, implementation and complexity.
Have a look for yourself!
I hope this answer solves your question.
It's my first answer, so go easy! :]

Categories