I am doing an application which the user receives a list of items to choose. When the user moves the mouse, a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it, an ONCLICK function marks the clicked div and redirects to a website( _blank ). Perfect, but when you go back to this page, there is two div selected. The div user has clicked and another one. If the user moves the mouse, even if a little, the second div goes backs to normal.
What I want is to go back to the page and only the div clicked is marked.
It only happens on Google Chrome
Jsfiddle ---->
https://jsfiddle.net/u4ssywov/23/
Print Screen -->
http://postimg.org/image/ynr6vjdlh/
Is it possible to solve and not mark a second DIV?
If I do not redirect to a website, it works normally, but I need to redirect. =(
Related
I have div tag like this
<div id="page-loader">
<img src="loader.png" alt="loading"></img>
</div>
and script will run for every click on "a" tag
$("#page-loader").show();
whenever there is a click on <a> tag browser shows "loader.png" pic and moves to new page(depends on href). after I clicked firefox's back button, it goes to last page and shows "loader.png" pic and it keeps showing "loader.png" pic not at all stopped. Could someone please help me on this..?
Thanks:)
That's because when you click back, you're effectively going back to the state of the div being shown. You could set your jQuery to always hide the div when initially loaded.
$(document).ready(function(){
$('#page-loader').hide();
});
I'm using TinyMCE with a "position:fixed" external toolbar.
The problem is whenever I click on a div which, on a click, becomes editable by tinyMCE, the whole Chrome page jumps so that the toolbar is always at a certain location on the page after that click.
How can I prevent the jump?
When a person clicks on a div, (whose ID is ta_id), this is the part of the code (of the plugin that's attached to that div:
tinyMCE.execCommand("mceAddControl", false, ta_id);
$('#'+ta_id+'_tbl').css("width",'100%');
divheight = $this.css('height');
$('#'+ta_id+'_tbl').css("height",divheight);
$('#'+ta_id+'_ifr').attr('scrolling','no');
$('#'+ta_id+'_ifr').css('overflow-y','hidden');
$('#'+ta_id+'_ifr').css("height",divheight);
$this.resizable("option","disabled",true);
$this.draggable("option","disabled",true);
If I click on the div in FF or IE, it's gets editable by TinyMCE without any annoying jumps.
I am creating icon menu (toolbar with icons) in gtk# and I do not know why my application always selects (highlights) first icon (every parameter is default). Is there a way to have all icons unhighlighted (highlight only when cursor moves over icon or user clicks on icon)?
Every answer will be very much appreciated.
It looks like it has keyboard focus. You probably want to give another widget the default focus.
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.
I have the following HTML code:
<div onclick="window.open('http://example.com')" >
<p>1234 Main St, New York, NY</p>
<p>Price: $200,000/p>
<p>4 Beds / 3 Baths</p>
<p>2000 sqft</p>
More Info
</div>
If the person hovers over the part of the DIV that is not the hyperlink, it only opens one window.
If the person clicks on the hyperlink within the DIV, it opens 2 windows (one for the DIV and one for the hyperlink).
Is there any way around this 2x opening window scenario?
The simple solution:
More Info
You could make the div clickable by making the link into a block element with css
div a {
display: block;
}
That's because the click event bubbles up. It initiates when you click the anchor element, than bubbles up to the div, and executes that too.
You need to capture the click event inside the div (using a function), and then call the event's stopPropagation method to stop it from bubbling up.
More info about event bubbling here: http://www.quirksmode.org/js/events_order.html
You could use the same function in both the DIV and the A HREF, and manage the opening inside that function to call the window only once, that will work.
Edit : If you care at least a little about Search Engine Optimization you should not use that caption for the link, but more something mentionning the content of the next page like "House details" or better depending of the context/look of the page.
I came across the same issue and please don`t laugh on my silly mistake. But two tabs was opening because i am having a link and having target='_blank' and also calling a function too on the same like:
<pre>
$('#foo').on('click',function(){
// some code
window.open("https://www.google.com","_blank");
});
where also i have added the target as _blank. i removed the target attribute from the anchor and it works fine for me. Hope you are not doing same.