So I have a bit of script at the bottom of my page //RETAINER CURRENT that is supposed to hide and show content based on what menu item the user selects in the maincontent area. Unfortunately in IE7 all layers are rendered which means the videos in each layer play simultaneous. I tried .detach, .remove, methods and had no luck and when I saved the items to an array and .empty 'd them I still had no success. What noob mistake am I making?
http://jsbin.com/ahuye4/3
I had the same issue. I was using asp.net so the way I was able to solve this was by using updatepanels and handling the hiding/showing in the code behind with Panels.
I'm not sure what fraemwork/language you are using.
However, I think you might need to call into the flash object and pause/stop the flash videos programmatically.
Related
I created a site with a preloader and when I was done decided I no longer want it, but when I remove the code for it, it won't load past it any longer. It just displays a grey box when attempting to access the website.
There's quite a lot of code to show, but I was just hoping someone may be able to steer me in the right direction by telling me what Div is causing this via inspect element.
If there's any snippets of code I can provide please let me know.
The #main id on the upper most div is causing the problem. Consider using semantic elements like main over generic divs.
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 :)
I know this is a problem I could solve with a huge list in "innerHTML", but there's got to be a better way.
I'm making a webpage with a "search" and "browse" section, both are big buttons at the top of the index page. I have search.html and browse.html, but I want their contents to load in my "main" div on the index page rather than open their own pages. I should be able to quickly click between "search" and "browse" and have their different pages load back and forth inside the index page. Hopefully that makes sense. I was trying a solution with frames before, but it wasn't working for me.
Any advice would be greatly appreciated.
Thanks!
You can use tabs or something like that: http://jqueryui.com/demos/tabs/
Most JavaScript AJAX libraries such as jQuery have this built-in - in case of jQuery the load method.
However keep in mind, "tricks" like this destroys the browser usability for your users (broken back button, not possible to set bookmarks, etc.). It's possible to work around, but that makes extra work.
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! :]
I am having some trouble creating a experimental 'dynamic' style website. The site is set up as follows. The user has a menu of links to choose from, specifically using an image map. When they hover over a selection, an iframe pops up (becomes visible) displaying some data. When the user removes the mouse the iframe goes away, until the user hovers over another link.
-- It seems to be working well, but only intermittently. Sometimes after leaving one of the anchors, the syle, text etc. still occupies the frame even after i hover over another link. This behavior seems to be fairly random, but there must be a way to fix it.
Here's an example of what i'm using. The show function sets the frame to visible if the argument is a 1, and hidden if 0. frameset sets the main frame to the desired html document. I tried implementing a reset to set the frame to something blank after leaving the link to try and fix it, but the problem persists.
<area shape="circle" coords="..." href="..." onmouseover="Show('frame', 1);
frameset('page.html');" onmouseout="Show('frame', 0); reset();" />
And the functions
function frameset(a)
{
document.all.frame.src=a;
}
function reset()
{
document.all.frame.src=blank.html;
}
It's a very hard problem to describe, so let me know if more information or code is needed. Any better alternatives to my method are also welcome, considering i'm not fluent in javascript :)
Thank you
I think what you are doing could be performed better by using a more modern approach.
The image map could have absolutely positioned block level anchor tags.. but this doesn't seem to be the problem.
Instead of using iframes, I'd recommend using AJAX to get the information and a framework like jQuery to help you display the data.
You could load the AJAX and display the box with a loading throbber (http://www.ajaxload.info) on mouseover, and parse the data into viewable format inside the div.
Learning AJAX
AJAX is when a page makes a http request to the server and can also return data which is then used with Javascript to update the DOM.
jQuery is a Javascript framework designed to abstract away browser specific code and inconsistencies and just make using Javascript a better experience.
Check out jQuery's AJAX functions
Good luck!!