Can someone tell me why does the hover state stops working once i visit a link?
http://jsfiddle.net/trajaneu/ZBzV9/
Links on the footer belonging to class "contactos" work well. But those on the class "texto" are not working.
Nevermind. I've found the problem here:
.contactos a:link,.texto div a:visited,.texto div a .yshortcuts {
I've just replaced "texto div" for "contactos". Copy-paste sometimes has these effects :)
Related
I have implemented a panel where user can post their thoughts with images. For every post there is a reply box similar to the facebook timeline. User can mention any user while replying to any post and I tried to make this mentioning easier. I have used a JQuery UI(JS and CSS) autocomplete dropdown to suggest the username when # sign and some other letters are typed(similar to FB or Skype ).As expected, the reply box are dynamically generated. I have made a single autocomplete dropdown and attached it with a reply box which get focused. For this I used this function to set the position -
$("#hidden-autocomplete").autocomplete("option", "position", { of: "#" + currentReplyBoxId } );
Everything is working fine except the dropdown position. The dropdown appears over the input field so user can't see what he has typed so far. See the image -
Here I've made a reproducible example.
But I want this like below -
Now dropdown is below the input field , the height is fixed and scrollable. Am I doing something wrong? Could you please help me to get the desired results? TIA
Looks like you need to set all 3 jQuery UI position properties:
my: "left top",
at: "left bottom",
of: "#" + currentId
Here is the working fiddle https://jsfiddle.net/yg5sdxw6/2/
I previously used javascript dialogs for confirmation on a mobile web app, but am now trying to switch over to using the new popups feature in JQM 1.2. My initial test doesn't work - no popup appears and I'm simply redirected to the anchor I'm trying to call.
My test code is simple, albeit a bit obfuscated because I'm using haml:
%a{:href => "#popupBasic", :"data-rel" => "popup"} Show popup
%div{:id => "popupBasic", :"data-role" => "popup"} Basic popup div
That said, I don't believe the haml is causing the issue based on reading the final HTML output. Both elements are at equal depth and contained within the element.
In addition, the div does "popup" without issue when I use the following at the console:
$( "#popupBasic" ).popup( "open" )
That makes me believe that the issue lies somewhere in the link or the URL handling. When I do click the link, it instead takes me straight to
http://localhost:3000/#popupBasic
Any ideas on how I should be handling the URL differently so that it shows the popup as intended?
After realizing the problem was probably some part of my Javascript, I went through and tried turning off each bit of javascript individually, until I figured out that the problem was with this in my application.js file:
$(document).bind("mobileinit", function(){
$.mobile.linkBindingEnabled = false;
});
which prevents all anchor click handling. Obviously now that I've removed this code the anchor links are working properly. Of course, that means I'm now left with trying to figure out why I added that in the first place and what I just broke by removing it...
I am implementing a “have not yet viewed” list where the user sees a list of items in a ul and those the user has not viewed have a data theme applied to highlight them. When the user clicks on the item it is displayed, and I need to remove the data theme so the item is no longer highlighted.
I have the logic correct to actually remove the attribute as I can see in the Elements section of Chrome’s Developer Tools the attribute is no longer in the li. But the highlight is still visible in the rendered page.
I’ve searched and have seen a number of suggestions involving refreshing the page, list, etc., all to no avail. You can see some of the attempts as follows (in the function "this" is the li):
$(this).removeAttr("data-theme");
//$(this).closest("ul").listview("refresh");
//$(this).closest("ul").listview();
//$('#mylist').listview();
//$("#content-notifications").page();
//$("#content-notifications").page("destroy").page();
//if ( $("#content-notifications").data("page") ) {
// $(this).closest("ul").listview("refresh");
//};
Anyone have the correct solution, because I can’t find it!
Thanks-
Matt
You have to manually remove the class for the old theme in li and add the class for new theme.
$(document).on("click","li",function(){
$(this).attr("data-theme","b").removeClass("ui-btn-up-a").addClass("ui-btn-up-b")
});
Demo here - http://jsfiddle.net/ENYxw/
I am currently building a website containing lots of links to different sections of my website (also known as navigation). Lets call those links and their corresponding pages link1, page1 , link2, page2, link3, page3 etc.
The general code for them is this:
Link1
Link2
Link3
I want the user to click each link to move to the corresponding webpage and it works as supposed to. The problem is that I want the links to do nothing when the user is on the same page as the link they clicked (meaning it will only reload the page). Let me make this clear by using an example:
Current use: User is on page1. User clicks on link1. The browser will reload page1.
Desired use: User is on page1. User clicks on link1. The browser will do nothing.
TL;DR Essentially I am searching for an if clause. I have read there is no if clause in HTML simply because it's a markup language but what is another way to implement this? Thanks for your help.
The best answer I have found without the need to use JQuery or JS after munching through SO is this, answer made by Matt Crinklaw-Vogt:
Add a /#!. This will prevent the scrolling to the top and will also prevent the page reloading.
Code:
Link1
Original answer:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
I'm not sure I like it, but you could use an empty bookmark to do this...
Link1
If you aren't on page1, it will load page1, but once you are there, it won't do anything.
Link2
OR
<a onclick = "return false;">Link2</a>
That cancels out the load.
On page load, you could use JS as follows
Link1
JS:
document.getElementById("link1").setAttribute("href", "#");
You can use javascript to compare the current url to the anchor link, and if they're the same, prevent the default click event. Using jquery:
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))) {
$(this).click(function(event) {
event.preventDefault();
});
}
});
I am using jquery ui sortable to sort TD's in a TR. In chrome this seems to be indenting the TDs to the right. From a similar question found on SO, I reckon this is because of chrome adding an extra TD which is not even visible under console, and is only being rendered.
How do make this work?
I have found this snippet that tries to force chrome to render again, but this does not seem to work.
var n = document.createTextNode(' ');
$('TD:eq(0)').parent().get(0).appendChild(n);
n.parentNode.removeChild(n);
The similar question found on SO says that he was able to solve the issue by calling a function .render() on his view item, I presume this is a custom function for a library the asker was using.
Any ideas on how to force refresh the DOM?
To those who are facing a similar issue, I found that hiding the parent element and showing it after a small delay(10ms works), keeps things working.