css, html and vimeo
-
In this widget, I’ve declared in CSS a container class, and a box class. The parent container is position relative, and the child box is position static.
The HTML starts off with the a master div, followed by a series of divs each enclosing a box.
This results in a left aligned column of boxes. It looks fine outside of the WP env, but as usual, some tweeking is need to make it look normal in WP. (I have yet to do these tweeks.)
My question is this:
I am wondering if it is possible to have another div that contains vimeo embed code (between brackets) and have vimeo display in a small rectangle to the right of the left handed column of boxes.
I tried the follwing code, but it didnt work, or work partially would be more exact. You see the vimeo screen, but it is left aligned and breaks up the column of boxes. How can I fix this?
here is what the css looks like for the vimeo embed code
.Vid {
float left;
}and the HTML is as follows:
<div class=”Vid”>
[vimeo 104888094 w=300&h=200]
</div>
right now the widget looks pretty funky. you can see it here
http://needlepointlandstore.wordpress.com/whimsy-and-grace-hat-bands/
any thoughts re a solution to embedding vimeo such that it exists in a display space to the right of the blue column would be most appreciated!
thanks!
The blog I need help with is: (visible only to logged in users)
-
for those interested in reading the code, I put it up on jsfiddle. it works fine there, except that the background color of the main container (.Navigator) is not being displayed.
Here is the link:
http://jsfiddle.net/alibey/6b8cuva5/
It works fine on IE, Safari and Chrome, but not Firefox.
I tried sticking an iframe (to display the vimeo vid) after the first box in the first, with and without divs, but that did not work. yes i realize iframes are strictly verboten in wp.
-
The video breaks up your column of images because that’s where you’ve put it in your HTML. Try moving the section shown below to the end of all your other div elements to start with:
<div class="Vid>...</div>
Alternatively you could position the video relative to the containing element using this code:.nCanvas_display_area {position:relative;} .Vid {position:absolute; top:0; left:300px;} -
thx, as your answer gave me an idea of where to go to fix this. i played around with it for a bit, and was able to move the Vid box around, but do realize i really need to better grasp the CSS box model more clearly.
it is quite tricky when you are new to it, and twiddly all the various controls can have unexpected effects.
While I can get simple things done, the various divs are not behaving exactly as I expect them to behave. So there is technical CSS homework needed on my end, which I will do pronto. I am also concerned that I have waaaaaaay too many divs, as I read somewhere that this is bad coding practice/
but in the meantime, I have two generalized questions that I would appreciate being given a hint if to the following two things (which r related to this thread, so not a new topic) can be accomplished:
1) can I change the background black screen of Vimeo to be the background-color of my Nav widget? the black screen looks horrible.
2) is is possible to have my “zoomed out” image (this is what happens when you mouse hover over one of the images in the column of boxes) OVERLAY that is to say, hide, the Vimeo display box?
I’m not really looking for code here, just knowing if it can be done. If yes, I will try to figure it out by myself, as that is the only way to learn!
thx again for your help.
-
- I don’t think so, but you’ve removed the video from that page so I can’t tell for sure.
- You might be able to using the z-index property if the elements in question are positioned, but again, without the video there I can’t do any testing.
Seeing as you’ve asked quite a few questions about setting up this particular page on your site it seems like it’s worth me asking what the end goal is: what is the purpose of the rollover images and why do you want them obscuring your video?
-
okay I put the vid back in. let me explain the purpose of this page.
the idea of this “widget” is to allow users to view needlepoint canvases easily and quickly, on a browser or smartphone. IE9 and below support is not relevant.
there is a list of menu options up top (separated by a blue line from the main display area). these refer to canvas types. For example, you could have a list of (in the case of this page) a column displaying a stack of images that all of the type “Hat band. Ideally there would some way to make have a tiny grey background rectangle behind an active menu option to indicate which one is being displayed.
Then if the user clicks on some other menu icon, for example, dog collars, this would initiate a hyperlink to a nearly identical page, except that in this case, the images would be of canvases of type dog collar.
The question mark icon at the end of the menu option would take them to a page that has FAQs – explaining how to use the app. Ideally though, this would not be needed by most users.
Moving down to the main display area, below the blue line, the idea is to have a stack of images, left justified (while allowing for a small margin or border for aesthetic purposes). In this case the image is vertically narrow, so I have formatted it to be 150w x 40 height in the 150 x 150 thumbnail boxt, and it should expand to right when a mouse hovers over an image to the border of the nCansvas display area. (Other canvas classes or types have different sizes, when expanded, so this a problem I will have to solve later).
I am using the space above and below the image in the nCanvas box to display item ID info, such as part number (this is located above the image), and size and mesh count (this is below the image).
Conceptually what should happen is that a user can mouse hover over an image and it would expand out to the right to the limit of the display box. Sorry to repeat myself, but I want to make clear that this is the main goal of the widget. In other words, to see a larger pic without having to hyperlink to the gallery library page containing the full sized image. The idea is speed, speed, speed, as users spend only a few seconds browsing through a collection of images — unless they find one they like.
A user can take the elevator slider to view additional items in the particular class. Some classes have 10 stacked items. Other classes can have as many as 50 (or more).
Finally, the user should be able to see a video (I have re-introduced the vimeo widget in the existing link) in which I explain what these canvases are (the vid I have now is just test vid that has bloopers etc so it is not the one I would ultimately use.) The video remains the same for all class types, as the video describes all the class types (dog collar, hat band, etc). The pwd for seeing the vid is “whimsy.”
That is it. This app is meant to be a very simple app that displays in a very end user friendly way (the the simple interface) and in a performance efficient manner a potentially large collection of canvas images that can be cycled through and zoomed.
I have separated the menu options from the canvas display area with a customized <hr> separator. Initially I had a grey gradient that worked well, but I changed it to blue, and it became a solid line (I dont know why). But changing the color for some reason fixed the problem I was having with the first box in the stack. It works okay on Chrome but not on other browsers, such as Safari or Firefox.
Which brings me to the last point, the behavior of this app changes dramatically with different browsers, which is a total bummer.
Well, that’s it. Now I have explained what this widget does (or is supposed to do!) at some length.
I think it would be a nice tool for my customers to be able to view my catalog, and I especially want this catalog to be easily viewable on a smartphone, thus the 1 column layout.
Thanks for asking about this app. I may put the code on a different test page, and just replace it with simple links etc for now, so that I have at least something that works — as I try to learn enough CSS to make this simple “widget” work.
Thanks again, and any help or hints is of course extremely appreciated!
-
I managed to find fixes or workarounds for all the bugs, except for several browser related behavior that may be a function of Pictorico, the WP preprocessor, or both.
The code I wrote looks pretty clean, so I don’t think the problems I have listed are there. In effect, the Navigator runs fine on Chrome, okay on Safari, sucks on Firefox, and is unusable on IE of any version (as is Pictorico, for that matter).
Here is where I am keeping the bug report for this app. WP tech help may be interested in consulting it in order to fix Pictorico — if that is the problem: (Then again, if my code is the issue, please do tell me how to fix these — it would be much appreciated)
I am now going to load actual production level image content for the Canvas Navigator (what I have named this widget) to cycle through, and try to improve some of the icons too, as they are ambiguous (an icon of scissors does not necessarily bring to mind scissor cases, for example).
The bottom line takeaway for me from this experience is this: once I mastered Element Inspect on Chrome, it became easy to find and fixe all the bugs. Inspect is intimidating at first, but once you get the hang of it, it is a piece of cake.
But this business of having to account for the differing behaviors of various browsers really puts the onus on those of us who might have to write a lot more browser handling code than what would normally be required : it is kind of like trying to drive 4 different cars simultaneously!
-
ps I am also going to experiment with the z-index idea. okay… that is it. closing the topic as the problem is solved, sort of, but not really in terms of browser comparability.
- The topic ‘css, html and vimeo’ is closed to new replies.
WordPress.com Forums 