I building a mobile views for my website and i am still in process of creating them. i want to test how it would look on live device. so i would like to disable the .mobile files and below i tired running some scripts to disable but no luck.
<script>$(function () {
$('html').find('*').attr('data-role', 'none');
});
</script>
<script>$(document).ready(function () {
// disable ajax nav
$.mobile.ajaxEnabled = false;
});
</script>
Maybe these is a question for the developers but if any one can point me in the right direction.
You need to disable auto-initialization $.mobile.autoInitializePage of jQuery Mobile framework once mobileinit event is fired. Add the below code after jQuery (core) library and before jQuery Mobile in head.
<script src="jquery.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.autoInitializePage = false;
});
</script>
<script src="jquery-mobile.js"></srcipt>
To manually initialize jQuery Mobile, you need to call $.mobile.initializePage();
hey Omar thanx for the help but i found it how disable it [blog.mirajavora.com/overriding-browser-capabilities-in-asp.net]
public class BrowserCapabilitiesSwitcherFilter : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var switchParameter = f filterContext.RequestContext.HttpContext.Request.QueryString["switch"];
if(string.IsNullOrEmpty(switchParameter))
return;
var browserOverride = BrowserOverride.Desktop;
if(Enum.TryParse(switchParameter, true, out browserOverride))
{
//switch between BrowserOverride.Desktop / BrowserOverride.Mobile
filterContext.RequestContext.HttpContext.SetOverriddenBrowser(browserOverride);
}
else
{
//set the user-agent string
filterContext.RequestContext.HttpContext.SetOverriddenBrowser(switchParameter);
}
}
}
Related
So I have a button on my HTML code that I have set to hide a certain content. However; when I added a popup feature to my code it makes the button not work.
JS for the popup:
$ = function(id) {
return document.getElementById(id);
}
var show = function(id) {
$(id).style.display ='block';
}
var hide = function(id) {
$(id).style.display ='none';
}
JS for the hide content button:
$(document).ready(function() {
$('#hideshow').click(function() {
if ($(this).text() == '▼ VIEW CONFIGURATION ▼') {
$(this).html('▲ HIDE CONFIGURATION ▲')
} else {
$(this).html('▼ VIEW CONFIGURATION ▼');
}
$('#topContainers').slideToggle(400);
});
});
I cant figure out what in the popup JS code is causing the button not to work.
you are using the jquery library which uses the symbol $ and then in your popup.js you are overwriting that symbol and assigning it to a shortcut to the getElementById function, losing the reference to the jquery library.
This:
$ = function(id) { return document.getElementById(id); }
overrides the jQuery method and thus your code using the default $() doesn't work any more.
I have a /js/common.js file attached in the <head> of my webpage, and then the file for my page /about.aspx.
<script src='/js/common.js'></script>
<script src='/js/modernizr-custom.js'></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
I can hear how dumb this question is, and I do apologise, but it is annoying me as to why I can not figure it out.
This code here shows and hides the navigation:
var didScroll;
/* more variables .. */
$(window).scroll(function (event) {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
/* Rest of code */
}
And my common.js file has the following structure:
// Declarations
var pageLoaded = false;
var fontsLoaded = false;
// Wrapper
function wrapperWidth() {
return parseFloat(document.getElementById("wrapper").offsetWidth);
}
// And so on..
//-----------------------
// jQuery Initialisation
//-----------------------
$(document).ready(function () {
//Set variables on page load
$(window).load(function () {
pageLoaded = true;
fontsLoaded = true;
});
});
If I place my js to hide the menu on scroll within the external .js file common.js, the javascript does not work and I don't know why?
At present, I place it right before the closing </body> tag on each page.
I wish to be able to place my javascript in one place 1) so that it can be easily found for maintenance and 2) most importantly, to speed up load time, as the more <script></script> tags one has, will slow down page load.
Can someone please explain why my 'menu hide' javascript will not work when I place within my common.js file?
Check if you called properly your common.js and jquery min.js
Call it in below given order
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"> </script>
firstly I don't know the logic or syntax of javascript- I just grab code and maybe swap out some values, so as much hand holding as you can provide in your answer is greatly appreciated. I just want my video on mobile devices to pause on tap/resume playing on tap, like with YouTube. I’m currently using CDN for the default css and js files, then I have some skin customization in my css, and my own local js file with the below code. I just need to know what code to add, and where to add it- thanks in advance!
$(function(){
var $refreshButton = $('#refresh');
var $results = $('#css_result');
function refresh(){
var css = $('style.cp-pen-styles').text();
$results.html(css);
}
refresh();
$refreshButton.click(refresh);
// Select all the contents when clicked
$results.click(function(){
$(this).select();
});
});
Bind a "touchstart" event on the container of the Video. For example, if the video is inside then:
jQuery(function(){
var $refreshButton = jQuery('#refresh');
var $results = jQuery('#css_result');
function refresh(){
var css = jQuery('style.cp-pen-styles').text();
$results.html(css);
}
refresh();
$refreshButton.click(refresh);
// Select all the contents when clicked
$results.click(function(){
jQuery(this).select();
});
jQuery( '.video' ).on('touchstart', function(){
if (player.userActive() === true)
{
player.userActive(false);
}
else
{
player.userActive(true);
}
});
});
This may be a really dumb question but I'm having trouble including a jquery plugin in my code.
The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following:
http://jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function"
How do I use a jquery plugin in my code? Thank you
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
You need to include the link to jquery in your html header.
1) Download jquery from jQuery.com
2) Link to downloaded file in your header
Like so:
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
As the previous answer. But put them in the bottom of the body tag.
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
you need to add the following to the header of your html code
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>
In my website, there include such 2 files: index.php, script.js
Of course, it is much more complicated in the web site and the above only shows a part of it.
In index.php, there is a div element
<div id="phb29" class="drag ph hour01">Testing</div>
In script.js,which is a pure javascipt file,below show a part that i want to use a jquery function .switchClass() (from http://api.jqueryui.com/switchClass/) to switch the class of div element.
//... other normal js codes
switchClassHour = function(){
$(function (){
$( "#phb29" ).switchClass( "hour01", "hour03", 1000 );
return false;
});
}
//other normal js codes...
I only want to call that jquery when I call the switchClassHour() function but not the web page is loaded(i.e. $(document).ready(function (){...}); )
I have included the source in the in index.php:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
But finally, the chrome browser gives me this error occurring at the line $(function (){ when I trigger switchClassHour():
Uncaught TypeError: boolean is not a function
What should I do, thank you !!!!! :):)
The variable toHour does not appear to be defined within the function switchClassHour.
Try this
switchClassHour = function(){
/* `toHour` ? */
if (window.jQuery) {
/* $(function (){ */
$( "#phb29" ).switchClass( "hour01", "hour03", 1000 );
/* `return false;` ? */
/* }); */
};
};
switchClassHour(); /* just noticed, is the function actually called ? */
Edit
Try this
switchClassHour = function(){
/* `toHour` ? */
if (window.jQuery) {
/* $(function (){ */
console.log($.now())
/* `return false;` ? */
/* }); */
};
};
switchClassHour();
Is $.now() return'ed at console?
Is $ utilized in other parts of non-jquery pieces?
See also https://api.jquery.com/jQuery.noConflict/
Edit
Try this
switchClassHour = function() {
jQuery.noConflict();
(function( $ ) {
console.log($.now(), jQuery.now())
})(jQuery);
};switchClassHour();
Hope this helps
function switchClassHour(){
if(document.getElementById('jq')){
//original switchClassHour() code.
}
else{
var jq = document.createElement('script');
jq.src = "WHATEVER SOURCE YOU WANT TO LOAD FROM (PROBABLY GOOGLE)";
jq.id = "jq";
document.getElementsByTagName('head').item(0).appendNode(jq);
//Original switchClassHour() code
}
}
I don't know if this is guaranteed to work since I don't know if you'll be able to load jQuery fast enough to call your function immediately afterwards. If this doesn't work because jQuery isn't loading fast enough then the only outcome I could see is adding a delay but that's ugly. To be honest if you're using jQuery I would just load it from Google normally in the <head> of your page. Most people have it cached already.