Im looking to create a landing page that emulates DropBox (in wordpress). I was wondering how they achieved the effect of clicking the play button that overlays the background box that then turns into a video?
I see from the source that they are using JW player but again no clue on where to start with this. Are there skins you can buy that allow this? Any ideas to lead me in the right direction are appreciated.
Thanks
Can be done easily with jquery and css. First, absolute position both divs centrally on the page so that when visible one is on top of the other, then set the video div css to "display:none;". Then you can use jquery to show the video and hide the play button on click, something like this:
$(function(){
$('#play-btn').click(function(){
$('#play-btn').hide();
$('#video').show();
});
});
Simply done mi amigo. Bare in mind they don't have to be centered, they just have to be positioned one above the other...
Related
Currently, I'm browsing some pages and I found that there's a page where the design is very pleasing to me. So I'm trying to replicate it, but unfortunately that I can't figure it out due to my lack of CSS skills.
So here's how that page work:
Whenever the class is active, it'll hop up a bit (the page I'm looking at is using Swiper, too!)
But however, the Hop-up image will go out of the box of Swiper
And what I'm doing right now, there's a box just like that page, but the image or anything else if it's larger than the current box, it'll be cut. I can't make it go outside of the Swiper's box.
Here's how I'm currently doing it, I made a quick dataSample and then mapped it, get the current slide to have the active class, and then CSS it. Any help is appreciated, many thanks.
I've left comment on what I'm doing in the CSS at CodeSandbox.
Code: CodeSandbox - Trying to create Hop-up image using Swiper
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
I have 2 div's, one div has swf object & other has tabular data. Both are on same page. I would like to toggle them, if video display table div is hide, and if table then video div will hide.
This is working fine, but when toggle to table div video get started from start. I want to pause the existing video.
So please let me know how can I pause it without restart it.
If you are hiding the div with CSS (display:none;) the SWF file will start rendering as if you are opening the page for the first time or reloading it. First try to use (visibility:hidden;) but you will have to set the position to absolute because this way will preserve div's space on the page.
If this didn't help there is a bridge between javascript in the page and SWF files where you can ask for where the video is playing now before you hide the div, store this on the page, then when you restore the div you can tell SWF to seek to the stored time.
check this as a sample for javascript/AS3 interactions:
http://circlecube.com/2010/12/actionscript-as3-javascript-call-flash-to-and-from-javascript/
In an ecommerce site, I would like to display number of items in a row according to browser width, but minimum will be 4 items. Just like what has been done in Amozon site, if you try to browse amozon.com, try to maximize and shrink your browser, you will find that number of items display in [More Items to Consider] section is according to your browser size. It is smart enough to know when it should fully hide or show an item, no partially visible item forever.
Anyone know what is this technology called? Any idea how this can be done? Thanks in advance.
You can do this with float elements in a div with overflow:hidden. I'll jsfiddle a proof of concept for you.
JSFiddle:
http://jsfiddle.net/WLEzw/
Make your browser window bigger and smaller and you will see more and less pears.
That is just CSS based.
An example of what you want to accomplish from a friend website redesign
shrink and wide the browser so you can see the effect
You can also use JQuery to moniter whether browser window is resized, through $(window).resize function. And you'll have to call details of the products shown either using Ajax or with iframe by reloading the page within iframe with more products.
The code to be written inside browser's resize method will be as follows.
$(window).resize(function() {
//Your code on resizing the browser.
});
I want a fusion chart in my flex app to display with a Lightbox effect like the effect you get when you click on any of the charts here or checkout the demos here
These effect have been attained with the help of javascript. How do i get the same effect via Flex? Any idea?
Thanks a lot
I built a Flex component called PopUpThumbnail that is very similar to HTML/JavaScript lightbox components.
Here's an example application that I created with it to displays Flickr images.
Add a mask over the top of the whole application with the content area in the middle and the semi alpha area around it. Clicking on the surrounding mask removes the layer, and you can interact with the content area as normal (make it look like a popup rather than actually using one...)