Using anchors in Wordpress menu creates selection box around content - javascript

Working with WordPress, I have created a one page site that uses anchors in a custom menu to jump to specific parts of the page.
It jumps to the section of the page that I have specified, as intended. However, it is creating a very visible, blue selection box around the content that it is jumping to. I have not included code in the CSS file or any project files that should be adding a selection box. So my assumption is that it is being caused by Wordpress?
Is there a way to disable a selection box around the content that is being jumped to?

What is happening is you are getting the outline property add around your selection this happens on chrome alot when you click buttons or focus on something. Try adding a class similar to this
SELECTION:focus {outline:0;}
to the object that is being highlighted or anchortag without seeing the code and what it is doing its hard to pinpoint the exact class

Related

Reference to part of the site using existing JavaScript animation

I am trying to design a website. I decided to work with this template from templatemo.
I am currently trying to add a reference to a specific part of the website (e.g. Contact) in the "normal text area". I tried to just add a href in the text, like this:
Contact me via the <a href="#contact_form" >Contact Form</a>
This does not work properly. If I click on the reference, the whole layout is somehow messed up. I assume this is because the click on the link does not trigger the javascript function for the "changing the slide" properly.
My question is now:
How can I trigger the javascript functions, for "changing the slide" to a specific part of the page in regular text areas?
This animation is already implemented and works properly (e.g. it is triggered when clicking on the buttons in the navigation bar). However, I have no clue how to use the same animation for jumping to a part of the page outside of the navigation bar.
I hope you understand my problem.
Thank you in advance for your support!
Ideally, you would have to modify the page contents in the respective location in the HTML file. The way this file is constructed is that you have a ul list with li elements that indicate each page, and each li element is given a numerical value that represents its position in the list (e.g. 1, 2, 3, ...). Make sure to edit and add any new pages in this part of the markup. If you want to adjust or trigger any page transitions, edit the data-no value in the <a> tag in #tmNavbar to the position of the page in the list.
If you want to trigger the transition from elsewhere in the website, I would recommend just clicking on the respective nav-item using Javascript. For example,
$('.nav-item').get(i).click() /* i is the data-no value` */

Bootstrap's tooltip on dynamically generated content

The page I'm working on is this: http://rafaelviana.com.br/busca_usp/
First, hover on the "test" link on top of the page. No bootstrap tooltip, right? Now press 'a' on the form. A table will appear with relevant results. Hover over the "test" link again. The tooltip appears.
I'm trying to make those tooltips appear on the "Unidade" column's items (these are acronyms for University departments' names). Such tooltips should display the department's full names.
But it appears that no tooltips ever work when I add the data-toggle="tooltip" attribute to dynamically-generated elements. They only work on static elements (such as the odd 'test' link on top of the page).
This persists even when I call bootstrap's tooltip from inside the code that generates the table (which is what's happening, as you noticed the test tooltip won't appear unless you make a search), that is, it persists even though $(function () {$('[data-toggle="tooltip"]').tooltip()}) runs after the elements are added to the DOM.
How can I make it so that tooltips appear on every element that contains the data-toogle attribute, be it dynamic or static?
edit: fixed, per solution in the comments. I think what I was doing wrong was make the call for .tooltip() inside a $function () {} element.

custom css select menu gets cut off at the bottom in chrome

Here's a link to my page:
http://2plygraphics.com/im-here/
I have custom select menus and form elements using the :before and :after pseudo tags. There is also a lot of javascript making things hide/show etc.
If you view the page in Chrome you will notice that on the first click of any select menu in the page, the contents of the menu get cut off at the bottom. Once you have clicked once, all menus work as designed. It also appears to be a compounding issue, in that, if a menu has 11 items it is cut off more than one with 2 items. Once the page is refreshed the issue happens again...
I have tried changing or removing line heights, padding, margins, the overflow method etc. Starting to lose perspective...any help would be appreciated.
OK, here is an image of it in action:
http://i59.tinypic.com/33ljm35.png
I have tested this in windows 7 using Chrome Version 33.0.1750.154 m
Update
Does anyone have any suggestions for working around this? I'm thinking maybe faking a click on one of the select menus to get it to "activate" after the page has loaded...
I had the same problem in Chrome/Win8.1 and i could solve that by removing the font-family setting on the select-element in my css. Without that everything was working like it should.

Need an anchor link that only moves Overflow text box without Scrolling Browser

I'm trying to figure out a way of clicking an Anchor link TEMPLATES
on the top of my page without having the browser scroll to the point of my anchor.
Sounds redundant huh?
Wait.
My anchor link is inside of a overflow: Hidden text box where clicking the Anchor link
at the top of my page should only raise the anchor in the Overflow text box displaying it's
content, like having a new webpage. From a layout perspective the browser must always be at the top of the page where my form is.
Anyone have a clue?
Thanks
UPDATE:::
Oh spoke to soon, looks like the Css and Javascript - Show and Hide method would be more adequate.
Found here: http://webdesign.about.com/od/dhtml/a/aa101507.htm
Thank internet!
It is very easy do so. What you are trying to do is to have a parent div/view which would act as the main div and all the other divs/views will be loaded or unloaded within it dynamically or so as its children. It would better to employ a design pattern such as "MVC", but it can be done via JQuery straight up. If I was to tackle something like this, I would have a "navigation view" and then content views so when a user clicks on the desired navigation link, that particular view will be loaded or scrolled in. (Of course, you need to experiment and line your depths as desired for the content views).
This is how Flash is programmed. This is a very high level explanation, and I hope it gives you somewhat of an idea about getting it going.

Where to find on-hover or on-select dictionaries for web pages?

I would like to add to my site a on-hover/on-select dictionary. What are they usually called, so I can search on the web?
I am thinking in a piece of javascript code that detects which word the mouse is currently hovering/selecting and after some time it shows a baloon with the hovered word definition.
Using onMouseover for this could be very annoying to your users. The NYTimes website uses the selected text (highlighted by double-clicking a word or dragging to select) to display a bubble that, when clicked, opens a popup with a query on that word or term.
See http://graphics8.nytimes.com/js/common/screen/altClickToSearch.js.
Are you thinking of tooltips that display the definition? You can achieve this with a style sheet by adding alt tags and adding a style="cursor:help" attribute.
Alternatively you could use a tooltip library like these jQuery ones.

Categories