When I search any thing in input Search and zoom out (ctrl/-) on my website , place of result of search will be change ! How I should fix it that result of search open bottom of input search exactly ?
My url : link of my website and it's pic of result of search : pic of my website
Looking at your website it seems that you have a script which generates the results using absolute positioning after results are loaded. Upon zooming out the absolute positioning is no longer relevant.
If it were possible, a solution would have been to listen for the browser's zoom event and recalculate this, however there is currently no way to do that. More information about that in this SO question: Catch browser's "zoom" event in JavaScript
The ideal solution would be to change the structure of your dropdown to not need absolute positioning if you want to handle this scenario.
Alternatively, you can keep searching for ways to listen to the zoom event and update the positioning of your dropdown using the search input's left offset.
Related
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>
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...
I have searched for this and it seems that the solutions I have found are not working for me.
The end goal is to have two tabs, one with google maps v3 (that shows by default, haven't gotten that far) and one tab that is hidden until clicked on.
I can get the tabs to work, but google maps does not show, I have used the resize and set center in the function for the tabs but still not working. I also have the width & height set to 100% (for mobile devices).
Can anyone take a look at the code and point me in the right direction, it would be much appreciated! Again, the ultimate goal is to have the maps tab show on page load and then the tabs work as a user clicks them, showing the appropriate tab. But at this point the map tab doesn't even show the map.
my code can be seen at http://m.lewis-realty.net/map/test2.php?gps_lat=34.43640541614963&gps_lng=-77.5616387038574.
Thanks!
Chris
Not sure if this is what's causing the problem, but on line 94 of "functions.js", there is a javascript error -- You're missing opening and closing parens around the "if" condition.
I don't have a way to test it out right now but it's worth a shot.
I figured most of it out.
Along with the map resize that was already in my code, I added this to the tab function:
$('div#' + $(this).attr('data-href')).css('{display:block;width:100%;height:100%;}');
which changes the css style for the div you are selecting, so now the map works fine.
When you show the tab that contains the map, remember to trigger the resize event on the map so that it can recalculate its size.
google.maps.event.trigger(map, 'resize');
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 need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?