I'm using an externally rendered control to create an menu on a webpage. The control is coming from an cms system and can't be modified. When calling Cufon.replace() to change the font of the menu items provided we notice an flickering effect in IE8, like there is some sort of delay. In FireFox 4 and Chrome this effect isn't visible. I've read other topics on stackoverflow about it, but none seem to look similar to this problem. It only occurs on hovering over the menu item.
We're familiar with the fact the Cufon needs to be called straight after the html-element of which the font needs to be changed. Is this still necessary? Or do I need to call a Cufon.Now() somewhere? What is causing the flickering effect here when I hover about the menu-items?
<cc1:MenuBuilder ID="Mainmenu" MenuName="Mainmenu" runat="server" CssClass="menubar-nav-list" UseDiv="true" ShowLevels="1" />
<script language="javascript" type="text/javascript">
Cufon.replace('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
</script>
You have to execute the following code right after the <body> tag.
<script type="text/javascript">Cufon.now();</script>
And then call
Cufon.replace('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
or simply
Cufon('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
The Cufon.now is doing the trick. For more information read the documentation. In this documentation they say to use it before the </body> but we found that this doesn't fix all the flickering problems but right after the <body> does.
I don't see anything wrong with your code, so this is just a shot in the dark.
To use DOM selection methods like #Mainmenu .menuitem (instead of just h1 or h2), Cufon requires a javascript library like jQuery.
Is it possible that jQuery isn't loading at the right time, or that you've set IE to no-cache mode, forcing it to redownload jQuery every time you reload the page?
Related
Is there a way to remove all styling from an Electron webview before the page is shown?
So far, I can inject JS to remove all styling after the document is loaded:
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('link[rel="stylesheet"], style').forEach(elem => elem.disabled = true);
});
The problem here is that the styles will show for a brief moment (~1 second) before styling is removed.
I can also use the following in my Main class to remove all .css files prior to page load:
session.webRequest.onBeforeRequest({urls: ['https://*/*.css', 'http://*/*.css']}, function(details, callback) {
callback({cancel: true});
});
This, however, does not remove tags embedded in the DOM. For a better idea of what I'm trying to do, you can check out Firefox's "No Style" feature (View -> Page Style -> No Style).
Thanks in advance.
There are two ways I can think of to prevent this:
Give the webview a visibility:hidden style, and make it visible later.
Point to a forwarding proxy who will strip out inline as well as linked CSS
Number 1 sounds to me a quicker and more reliable solution, but I haven’t tried it out.
Let me know how it goes.
So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.
Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/
What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:
if (window.matchMedia('(max-width: 800px)').matches)
{
$('.flipper').click(function (e) {
$(this).toggleClass('flipped');
});
}
".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.
Any suggestions would be appreciated :)
You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:
$(document).ready(function() {
$('.flipper').on('click', function(e) {
$('.flipped').removeClass('flipped');
$(this).addClass('flipped');
});
});
Regarding matchMedia you can see by running the test snippet that it works:
if (window.matchMedia('(max-width: 800px)').matches) {
$('.flipper').css('color', '#f00');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
testing matchMedia
</p>
Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:
<script type="text/javascript">
$(function(){
$(".flipper").flip({
trigger: "hover"
});
});
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
To this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
if (window.matchMedia('(min-width: 801px)').matches) {
$(".flipper").flip({
trigger: "hover"
});
}
});
</script>
Notice the media query added for desktop only, from 801px up.
As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.
When I run the following code and mouseover the href nothing changes (no highlight, no changed cursor). If I hold click on it, the hover event throws the alert.
I have no clue what could be wrong, this is impacting my web project, but also happening with very basic code.
html:
<a href='www.google.com' class='link'>Test</a>
css:
.link{
color: #000;
}
a.link:hover{
font-size: 18px;
color: #00FF00;
}
jsFiddle
Also removing 100% of the jQuery doesn't help either, I was just using that to debug what was going on.
Problem is rather unclear, I can just guess.
I think your page style is locally set to 'none'.
From https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently#w_reset-the-page-style
You may have inadvertently set the page style to No Style. To ensure Firefox is set to use the page's default style:
Press the Alt key to temporarily bring up the traditional Firefox menus, click on the View menu, then select Page Style, then click Basic Page Style.
Now that the page is using its default style, it may be displayed correctly.
(Similiar process for other browsers.)
this will fix your problem:
<script>
$(document).ready(function(){
$('#test').hover(function(){
alert('test');
});
});
</script>
or you can simply use:
<script>
$(function(){
$('#test').hover(function(){
alert('test');
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$('#test').hover(function(){
alert('test');
});
});
</script>
note: USE JQUERY LIBRARY 1.7.2
AND MAKE IT LIKE THIS
<a id="test" href="javascript:void(0)">Test</a>
I have an auto-pager set up on my page to allow for infinite scrolling. I also used jQuery to change the opacity of images when they're hovered over. however, the animation only works on the first page, not the consecutive pages that are automatically loaded. any idea why this happens? or are there any methods of fixing this? thanks.
this is the code i'm using for the images and the auto-pager:
<script type="text/javascript">
$(document).ready(function(){
$(".post").animate({opacity:.8});
$(".post").hover(function(){$(this).stop().animate({opacity:1}, "fast");}, function(){
$(this).stop().animate({opacity:.8}, "slow");
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
Where are your codes? We're not magicians...
To the extent of trying to figure out what you're saying here, I think there's a huge possibility that your code is not applying to the newer, auto-paged ones. See if you could put a more dynamic code into your system, and apply that AFTER the auto-pager has loaded the images.
I am using some JS code to transform my menu into a drilldown menu.
The problem is before it runs the JS you see a BIG UGLY mess of links. On their site its solved by putting the js at the top. Using recommendations by yahoo/YSlow i am keeping the JS files at the bottom.
I tried hiding the menu with display:none then using jquery to .show(), .css('display', ''), .css('display', 'block') and they all lead up to a messsed up looking menu (i get the title but not the title background color or any links of the menu)
How do i properly hide a div/menu and show it after being rendered?
In the <head> place this:
<script>document.documentElement.className = 'js';</script>
Now, it will .js class to your html element. And it will be the very first thing done by the javascript on the page.
In your CSS you can write:
.js #menu {
display:none;
}
And then:
$(document).ready(function() {
$('#menu').css('display','block').fancyMenu();
});
This is an excellent technique, that allows you to make your pages "progressively enhanced", if your user has JavaScript disabled – she will still be able to see the content, and you can also separate non-JS styling with styling, that is relevant only for JS version of your menu, perhaps "position:absolute" and things like that.
At the top of your page put:
<script type="text/javascript">
document.write('<style type="text/css">');
document.write('#mylinks { display:none; }');
document.write('</style>');
</script>
And at the end of your "processing", call $('#mylinks').show();
document.write is evaluated as the DOM is processed, which means this dynamic style block will be registered in the style rules before the page is first displayed in the viewport.
This is a good case where progressive enhancement works really well - if your users have JS available & enabled, you hide the links until they are ready; but if not, they are still available, albeit ugly.
Life will be gentler with you if you try not to make pages that look like "a big ugly mess" without javascript. Have a heart.
Whatever yahoo says, it would probably be worth it for you to insert a little script that adds a style element with a few rules to the head of ypur document, before the body renders.
I found the solution. I should let the links be hidden with css then .show() BEFORE the ddMenu code executes instead of after. The ddMenu seems to check the parents width and sinces its hidden i guess its 0. The time between .show() and ddMenu is fast enough not to show the ugly links (on my machine/browser). The the majority of the time (page loading, http req for the JS files, JS compiling/exec etc) the links are hidden so it looks pretty good.
$(function () {
$('.menuT1').show(); //do it before not after in this case.
$('.menuT1 > ul').ddMenu({
Well, If you are familiar with jquery then I would do something like this
$("#mybuttom").click(function() {
$("#mydiv").hide(); //hide the div at the start of process
$.post( "mypostpage.php",
{ testvar: testdata },
function(data) {
//callback function after successful post
$('#mydiv').show(); //show it again
}
);
});