I'm almost done with my new website and I figured I could do some improvements here and there before launching. One thing that bothers me is the fact that links are not underlined or highlighted in any way. It's okay, I want it that way. But I'm afraid certain links won't be noticed or might disappear completely next to more prominent features.
So I was wondering if there is a way to make the user notice the link without underlining/coloring/alternating it permanently. I was thinking of e.g. flashing an underscore/underline every 10 seconds (or randomly) or changing color every few seconds for a tiny bit. All without the need of the user's engagement (hovering over it). When you look at the page there should be some movement/change to help the user notice the link.
I hope you guys get what I mean. I am no expert by any means. If anyone could point me in the direction of any scripts/tutorials or whatever I'd be grateful. I tried googling around but couldn't come up with anything useful.
Thanks!
I think this is bad, you should use hover for a better user experience, or add an underline by default to make the link more recognizable because most users will know this is a link.
Anyways if you want to do this, you will need javascript in your website.
You can try the following.
var links = document.querySelectorAll("a")
setInterval(function() {
for (var i = 0; i < links.length; i++) {
var link = links[i]
link.classList.toggle("toggled")
}
}, 1000)
a {
text-decoration: none;
color: blue;
}
a.toggled {
color: green;
}
<h1>Hello</h1>
This is a link!
<p>Some text</p>
This is another link!
Related
I am working on an app in which users can upload images to their profile.
The following function is invoked when an event is fired from a child element. It dynamically creates an input element so the user can select a file to upload.
_changeImage: function () {
var input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener('change', this._imgChanged.bind(this));
input.click();
},
It works on browser and android platforms but fails on iOS.
Could anyone point out what might be causing this problem and how I could approach it?
This problem appears to be related to a security measure in iOS. File input must be manually clicked by the user, not done programatically.
In order to work around this we overlay an invisible input element over the target element.
<input id="inputpic" type="file" accept="image/*" on-change="someFunction">
*keep in mind that on-change is polymer specific so you may want to use onChange
Then we style it with css to have 0 opacity.
#inputpic {
opacity: 0;
position: absolute;
top: [position_of_target_element];
left: [position_of_target_element];
width: [width_of_target_element]px;
height: [width_of_target_element]px;
z-index: 10;
}
I am not particularly happy about this workaround but I tried several other proposed solutions (link below) and found that:
Using a 'hidden' attribute instead of css opacity does not work.
Wrapping the input element in a label element does not work.
More info in this thread.
If anyone else has a better solution I would love to hear back. Thanks!
The info windows in my google maps instance are lookin' funny:
Some of the images that make up the corners and extremities of the info window graphic seem to be missing. Any idea why this is happening? I'm experimenting, but haven't figured it out yet.
I'm using gmap3, a JQuery wrapper for google's V3 API. Here's my code for setting up the map (javascript/haml):
<script>
$(window).load(function() {
$('#map').gmap3();
var bounds = new google.maps.LatLngBounds ();
-#areas.each do |area|
bounds.extend(new google.maps.LatLng(#{area.latitude}, #{area.longitude}));
$('#map').gmap3(
{
action:'addMarker',
latLng:[#{area.latitude},#{area.longitude}],
events:{click:function(marker, event){
$(this).gmap3({action:'clear',list:['infoWindow']});
$(this).gmap3(
{
action:'addInfoWindow',
latLng:marker.getPosition(),
infowindow:
{content:"#{escape_javascript(link_to area.name, area)}<br>#{escape_javascript(image_tag area.image_holder.image.url(:thumb)) if area.image_holder.present?}"}
}
)}}
}
);
$('#map').gmap3('get').fitBounds(bounds);
$('.clickable_row').click(function() {
var id = $(this).attr('id');
window.location = '#{areas_path}' + '/' + id;
});
});
</script>
I've seen this caused by a max-width rule overriding the maps one. Try setting this:
#map img { max-width: none; }
I believe it has to do with low bandwidth on your connection.I think the images for the corners are timing out.Is this happening every time?Do you have problem in your connection?Try with firebug to see the network traffic and spot the image requests and if they time out.
I don't know what caused this problem, but it's no longer happening. I was still getting familiar with integrating javascript and google maps into my rails apps at that point, so perhaps I goofed up some setting or js inclusion. Who knows.
Chalk it up to my noobishness.
had the same problem,
just put this code into your css file:
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: 99999px;
}
I am working on a asp.net mvc site that uses facebook social widgets. Whenever I launch the debugger (ie9 is the browser) I get many error popups with: Error: '__flash__removeCallback' is undefined.
To verify that my code was not responsible I just created a brand new asp.net mvc site and hit F5.
If you navigate to this url: http://developers.facebook.com/docs/guides/web/#plugins you will see the pop-ups appearing.
When using other browsers the pop-up does not appear.
I had been using the latest ie9 beta before updating to ie9 RTM yesterday and had not run into this issue.
As you can imagine it is extremely annoying...
How can I stop those popups?
Can someone else reproduce this?
Thank you!
I can't seem to solve this either, but I can at least hide it for my users:
$('#video iframe').attr('src', '').hide();
try {
$('#video').remove();
} catch(ex) {}
The first line prevents the issue from screwing up the page; the second eats the error when jquery removes it from the DOM explicitly. In my case I was replacing the HTML of a container several parents above this tag and exposing this exception to the user until this fix.
I'm answering this as this drove me up the wall today.
It's caused by flash, usually when you haven't put a unique id on your embed object so it selects the wrong element.
The quickest (and best) way to solve this is to just:
add a UNIQUE id to your embed/object
Now this doesn't always seem to solve it, I had one site where it just would not go away no matter what elements I set the id on (I suspect it was the video player I was asked to use by the client).
This javascript code (using jQuery's on document load, replace with your favourite alternative) will get rid of it. Now this obviously won't remove the callback on certain elements. They must want to remove it for a reason, perhaps it will lead to a gradual memory leak on your site in javascript, but it's probably trivial.
this is a secondary (and non-optimal) solution
$(function () {
setTimeout(function () {
if (typeof __flash__removeCallback != "undefined") {
__flash__removeCallback = __flash__removeCallback__replace;
} else {
setTimeout(arguments.callee, 50);
}
}, 50);
});
function __flash__removeCallback__replace(instance, name) {
if(instance != null)
instance[name] = null;
}
I got the solution.
try {
ytplayer.getIframe().src='';
} catch(ex) {
}
It's been over a months since I last needed to debug the project.
Facebook has now fixed this issue. The annoying pop-up no longer shows up.
I have not changed anything.
I am using sIFR3 on a website. I remember in sIFR2 you coul use this sIFR.bHideBrowserText = false; to show the text before sIFR kicks in.
How do you do this in sIFR3 and where do you put the code?
Thanks for your help.
C
The feature as it existed in sIFR 2 no longer exists in sIFR 3. You could achieve the same affect like this, though:
sIFR.autoInitialize = false;
sIFR.activate(movie);
sIFR.removeFlashClass();
sIFR.replace(movie, { selector: 'h1' });
window.onload = function(){
sIFR.setFlashClass();
sIFR.initialize();
};
Where, of course, movie is the appropriate variable that references the Flash movie. You might want to connect to the onload event through another JavaScript framework. You must wait until full page load, things like $(document).ready() (jQuery) will not work reliably cross-browser.
I just have a short question about switching the color of sifr objects on the fly with changeCSS:
The point is, that I'd like to change the color of the two headers whenever the user clicks on the "Switch style to..." on the upper right corner. Check the example page: www.capsule.hu/index2.html - and after clicking on the link nothing happens with sifr objects. Version is: sIFR, version 3, revision 436.
I'm using Kelvin Lucks styleswitcher script with some modifications (the script is hardly the same as here: http://www.digital-campaign.com/dc-example/) - on my current page I'm calling the sIFR.replace method whenever user changes the style (www.capsule.hu), but it seems a little bit slow for me, that's why I'd like to change.
Thanks for every help in forth,
Csongor
You can place the following in the body of the switchSifrColor function on your site:
$('h2').removeClass("sIFR-replaced");
sIFR.replace(helvetica, {
selector: 'h2',
wmode: 'transparent',
css: [ '.sIFR-root { color: #' + color + '; }' ]
});
The main change is that the css property is an array of strings, unlike the object that you were passing.
And a side-note: great work! The site looks very nice.
[Edit]
I guess this will prove more useful than calling replace again.
var css = '.sIFR-root {color:#ff1ff1;}';
$.each(sIFR.replacements['h2'], function() {
this.changeCSS(css);
});
I just tried it through Firebug and it looks great :)
[/Edit]