I'm using AddThis (http://www.addthis.com/) on one of my sites, and it's working just fine. But I've noticed that the dropdown box will always open to the right side, if there's room enough to the right in the browser window. If there's not enough space to the right, the dropdown will open to the left side.
But I'd very much like the dropdown box to open to the left side all the time. Also if there's enough space to the right.
But I simply can't get this to work.
My AddThis widget works just like on this site: http://home.dk/
You can see the small button ("Del siden") in the right side next to the print and e-mail buttons.
As you can see the box opens to the right if the browser windows is wide enough. But try to make the browser window smaller so there's not enough room for the drop down. Then it will open to the left.
How can I force the dropdown box to open to the left all the time?
Thanks you very much in advance folks...
Best regards,
Kim
Read: http://www.addthis.com/help/client-api#configuration-ui
Try to use ui_offset_left and set a negative offset to the left so it positions it. You also have ui_hover_direction but not sure if that will accept a left value.
Related
I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.
I build a toggle bar in html/css and I want to use JS to close. I think I did all the code right, yet the script does not work.
Code:
$(document).ready(function(){
$(".fa-times").click(function(){$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");});
jsfiddle link
The point is that I created a button "x shaped" that closes the side bar but you won't be able to see it cuz is a custom font and I have no clue how to upload it onto jsfiddle. The button is placed in the top-right corner of the purple bar.
I hope its enough information and the code is easy to understand. I`m just at the start with html/css/js but I have to do this for a microsoft project since noone in my team can't even set a default html page.
P.S. Ignore the white element with that random text.
Correct me if i am wrong,as ii saw you fiddle your code working fine.When user click on cross btn that time blue side bar hiding left side.
Check width with element inspector in you browser
<i class="fa fa-times">you need same place holder here, or set width</i>
EDITED
It is a very interesting issue.
In the below image, there are left and right carousel arrows. There is a text box under each item where the user can type the name. If the user clicks on either left or the right arrow, and then, if he clicks on any input text box and clicks left, then the control still remains on the left and right arrows. I cannot go left on the input text box.
I hope I have tried explaining the issue. I cannot get the control of the textbox once I click the left/right arrow. I cannot show you the code because of company's policy. Any kind of help is appreciated.
Thanks in advance!!!
so this looks like an issue created by the carousel you are using, some carousels have implemented that wherever you click inside the carousel it will actually take it as if you are clicking the left or right arrow depending on which section of the carousel you click.
Without looking at the code Im thinking you would have to overwrite the onclick function or use a carousel that doesn't handles the feature I mentioned above.
I'd like to apply a global site-wide little javascript window on the very bottom right of the site that will display a window about 40 x 80 wide, just a book icon and the word "Bible", where when a person clicks it, it will open a pop-up window, centered and pull whatever page I give it to display the bible itself (I have it internally already). These little javascript windows auto scroll as you scroll up or down the pages, you've seen them many times.
PS: I also want a "hide" option, but it doesn't hide it but minimizes it down to a small icon, all the way to the very bottom right of the site. So, click it opens, click it minimizes.
Your solution lies with jquery www.jquery.com There are (literally) thousands of scripts and you are sure to find your solution there.
I want a scrolling menu that begins at a certain part of the page (like under the header), but stays there till you scroll down and it hits the top of your browser window, then follows you down the rest of the page.
Anyone have any clue how to do this? I can't find it anywhere on the net. I've seen others similar to it, but none that move to the top of the window.
There's a great example on gmail when you are viewing an email. The toolbar stays at the top of the email box, but once you scroll past the email box, it follows you down the page.
I know that position:absolute;top:0; will make it stay at the top without the fluid motion (I hate it because it looks sloppy).
** edit **
I really only need to know how to detect that the menu div is at the top of your page. I can do a mock thing where if you scroll down how ever far the menu div is, it will start scrolling down, but I'd rather actually get whether the menu div is past the browser window or not.
It's a mixed position of fixed and absolute, you will handle.scroll event and switch between that.
You can find an example here
Creating a floating box which stays within a div