I need some help.
I'm using Cufon for a custom font on a site I'm working on.
I applayed the Cufon font on the top links. So far everything is OK.
Here is my issue: As I'm making a responsive site, I want the font to change from the custom Cufon to a regular one, after the window is resized to a screen size less than 767px wide.
For this I am using the removeClass event:
<script>
if ( $(window).width() < 767) {
$('li').removeClass('newFont');
}
</script>
The issue is that the Cufon font won't get replaced until the page is refreshed.
I tried with the Cufon.refresh() event like this:
<script>
if ( $(window).width() < 767) {
$('li').removeClass('newFont');
Cufon.refresh();
}
</script>
But that doesn't work either, the font doesn't get replaced until I manually refresh the page.
Any help would be much appreciated.
Thank you in advance.
Related
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
I have some problems with Jcrop's croppable area size. In my own, simple application I used Jcrop without any problem but now I'm using Jcrop inside another web application (Virtual Viewer Snowbound). Here is a screenshot of my problem-free application:
I added all Jcrop js and css files to the other website's folders into the right paths. I think there is no problem about file locations. But probably something inside that website's css and Jcrop's css conflicts and prevents it from working properly.
Firstly I added these libraries to the most below side of the head tags (I commented out the first one because website has Jquery 1.9.1 version so it conflicts:
<!-- <script src="js/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
Then Jcrop functions are written:
jQuery(document).ready(function(){
jQuery(function ($) {
$('#vvImageCanvas').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [100,100,200,200],
bgColor: 'black',
allowSelect: true,
allowMove: true,
allowResize: true,
aspectRatio: 0
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
// Show image preview
var imageObject = $("#vvImageCanvas")[0];
var canvas = $("#previewMyCanvas")[0];
var context = canvas.getContext("2d");
if (imageObject != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
context.drawImage(imageObject, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
};
}
);
});
As you see the vvImageCanvas is the canvas which holds the image and I Show the preview inside previewMyCanvas canvas. The problem is croppable area size. If I add that below code:
style="width:auto!important; height:auto!important;"
into the
<canvas id="vvImageCanvas" class="vvCanvas">
tags then I have the below view:
As you see in the preview I can crop where I want but the croppable area does not have the same size with picture. I think that is the jcrop-holder div but I'm not proffesional in css issues.
If I don't add these style options then I have that:
The croppable area has same size with picture but the picture gets smaller and as you see in the preview, cropped area is different from where I crop. Maybe it crops from the actual size of image.
So, how can I use Jcrop functions without conflictions. I added
jQuery.noConflict(true);
but it didn't help.
Thanks.
EDIT:
Ok I realized the problem.
The Jcrop functions should work after the page load. But I cannot achieve that by writing these codes into document.ready or window.load blocks. That was the reason of asking this question.
Then I ran the code by a button click. It worked. But I don't know why it does not work inside document.ready and works in button click event. Also I have to make it work on page load automatically not by clicking a button.
Any advise?
It's a wild guess, since you didn't provide any demo, but I've come across similar issues in following cases:
Jcrop element was animated using CSS3 transitions
There was a CSS rule applied to the parent of jcrop element manipulating width, height, max-width or max-height of all img tags inside
Fix for the second case is obvious - you need to apply your custom rules only to the images you need adjusted - don't forget Jcrop creates its own elements in DOM in the same container as your initial image.
In case of using CSS3 transitions, you need to call Jcrop after all transitions for your element has finished:
$("#image").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
// your Jcrop code
});
You may encounter similar issues when using scripts to preload images.
I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:
The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.
I have tried adding this to the CSS:
.k-popup .k-calendar {
font-size: 10px !important;
}
And the result was odd:
It only worked partially because only the month name was reduced, the numbers remained large...
The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.
EDIT
I tried to add the k-calendar class:
#(Html.Kendo().DatePicker()
.Name("concessionTOD")
.Start(CalendarView.Month)
.Value(DateTime.Now)
.Format("yyyy-MM-dd")
.Culture("pt-PT")
.HtmlAttributes(new { #class = "k-calendar" })
)
but the result was this:
you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.
EDIT 2
I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:
So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.
Also, I found in the documentation that
Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.
I'm not sure how to interpret the second sentence but it may help in dealing with the issue.
Use the following CSS selector / definition:
.k-calendar {
font-size: 10px;
}
Check the following code snippet.
$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
title: "window with datepicker"
});
.k-calendar {
font-size: 10px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="win">
<input id="datepicker" value="10/10/2011"/>
</div>
OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.
So, I removed my iFrame setting from the Kendo Window:
#(Html.Kendo().Window()
.Name("addConcessionWindow")
.Modal(true)
//.Iframe(true)
.Visible(false)
)
and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).
Bottomline is:
it is not possible to have an overflowed iframe.
I have 3 columns: left center right and would like to drop loading the left when the #media screen maxwidth less than 768px.
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
I don't want to use display:none to just hide the column but to prevent it from loading, so it doesn't have to run server code that might slow things down.
What's the best elegant way to do that ?
CSS cannot prevent regular HTML content from loading and the server cannot know whether a media query matches.
You can get the matching media query using JavaScript (window.matchMedia("only screen and (min-width: 480px)")) and then load the content that you want from the server (using AJAX, or by navigating to a URL, with, say, ?screen-width=1024 appended to it).
It is not elegant, it is pretty ugly and not dynamic at all (unless you check this for every page load and if the query string does not match the media query that matches this session, you change the query string and reload the page), but it should work.
You can't detect the page width of the client from the server.
if you wanted the server to the div then you would first need to call a page that captures the screen width and then passes it to the server in a request for your page:
Example javascript (using JQuery):
window.location.href = 'www.site.com/mypage.php?page_width=' + $(window).width();
This could then be accessed in php through $_GET['page_width']
Alternatively you could do the whole thing in JavaScript which would be a good and dynamic way to handle it that would also take account of resizing of the browser window during page use.
I would strongly recommend using a library like JQuery as it makes your code much neater and is very powerful. This can simply be done using the following line of code: (for a web connected site, if it is for local use you would need to download the file locally)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
Then it would be a simple matter of inserting the following code:
$(function(){
if($(window).width() < 768){
$('div.left').hide();
}
});
The $(function(){ }); runs the code when the page has loaded.
If you wanted it to work when the page was resized as well then you could put that inside a function
function checkSize(){
if($(window).width() < 768){
$('div.left').hide();
}else{
$('div.left').show();
}
}
and call it when the page is loaded and when the screen is resized, like so:
$(function(){
checkSize();
});
$( window ).resize(function() {
checkSize();
});
It's not really elegant, but you could make the entire div a string and put it in an if statement within a script block. that way you check the window size and if it's not big enough, it just skips over all that html:
<script>
if ($(window).width() > 768) {
$("body").prepend("<div class='left'> Whatever stuff is in your div </div>");
}
</script>
I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.
I found that
.ui-page { -webkit-backface-visibility: hidden; }
or setting the data-transition to none
or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file
helped.
But apparently that is only working if the webapp is just one "multi-page".
I am using 4 separate pages.
In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering.
But as soon as I add the App to to the Homescreen it flickers again.
Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J
Is there no solution for this?
Nothing answered so far worked for me.
I ended up binding a function to all links or elements which cause a page change.
In the function, i trigger the page change but explicitely tell it 'none' for the transition.
Here is an example:
Javscript (jQuery)
$('.item-navbar-people').on('tap', function (e) {
$.mobile.changePage("#page-people", { transition: "none" });
});
Markup
<div data-role="navbar">
<ul>
<li><a class="item-navbar-people ui-btn-active">People</a></li>
</ul>
</div>
Hope this helps!
Work-around Solution
So, these are the things I tried:
data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags
It did not work for "Homescreen-App"/"PhoneGap-App"
I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.
So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.
This is a known issue.
Disabling/Enabling zoom BEFORE each page transition will resolve the issue.
I figure out it, changing the scale of viewport meta tag.
Let's me clarify...
In my tests I saw that when I apply some zoom in page on mobile devices, the transition works perfectly. So, just change the initial-scale in your viewport meta tag to something higher than 1.0, something like 1.01 for example. That's it!
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.01">
I spent weeks trying all suggested solutions in the Internet, what works for jquery.mobile-1.3.2 , Android 4.1.2, phonegap 2.9.0 is to delete these lines in jquery.mobile-1.3.2.js file
meta.attr( “content”, disabledZoom ); // just put // before the line
meta.attr( “content”, enabledZoom ); // just put // before the line
This will eliminate double flicks, also
set data-transition between pages to none
data-transition="none"
(The second fix is temporally until you can find a solution to get ride of remaining white page during transition)
Using this solution, no need to remove data-position="fixed" from header or footer which is one of helping solutions, but affecting interface design.
source: comments on http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
I had the same problem and something that sped things up and eliminated the flickering effect was implementing fastclick.js found here: https://github.com/ftlabs/fastclick.
After linking to the .js file,
Add
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
to the head of your document.
Voila. That helped me, hope it helps you too!