I included Modernizr on my site:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/modernizr.custom.js"></script>
and I have this in custom.js:
if (Modernizr.mq("screen and (max-width:480)")) {
alert("hello");
}
I resized my browser to be 480px, refreshed the site, but I didn't see any alert.
Any suggestions to fix this?
You need the unit value px in your media query:
Your line:
if (Modernizr.mq("screen and (max-width:480)")) {\
Should be:
if (Modernizr.mq("screen and (max-width:480px)")) {
Wesley is right, but just a quick note to remember is if (Modernizr.mq("screen and (max-width:480px)")) { will still only trigger if the media query conditions are met!
So if you're screen is larger than 480px and this script is called, it won't alert.
Created this just today to trigger a script when a media query is trigger (with IE fallback):
//Test to see if media queries are acceptable
if(Modernizr.mq('only all')){
var mql = window.matchMedia('(max-width: 980px)');
mql.addListener(tabletChange);
tabletChange(mql);
function tabletChange(mediaQueryList) {
//If media query triggered
if (mediaQueryList.matches) {
//SMALL SCREEN
} else {
//LARGE SCREEN
}
}
} else {
var resizeTimer;
mediaMatchFallback();
$(window).resize(function(){
if(resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(mediaMatchFallback, 500);
});
function mediaMatchFallback(){
if($(window).width() <= 980){
//SMALL SCREEN
}else{
//LARGE SCREEN
}
}
}
Related
Does anyone know what the error "You uploaded the wrong number of assets with Enabler components for this creative. The creative must have exactly 2 asset(s) with Enabler." means?
I'm assuming DoubleClick changed something on their end. I tried uploading old creative and received the same error.
I am using Hype3 to create my ad. Here is the script in the head of the file. I wonder if something has changed with the enabler.
<head>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<meta name="ad.size" content="width=1000,height=90">
<script>
// If true, start function. If false, listen for INIT.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// Start ad, initialize animation,
// load in your image assets, call Enabler methods,
// and/or include other Studio modules.
// Also, you can start the Polite Load
}
//If true, start function. If false, listen for VISIBLE.
//So your pageLoadedHandler function will look like the following:
function pageLoadedHandler() {
if (Enabler.isVisible()) {
adVisibilityHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.VISIBLE,
adVisibilityHandler);
}
}
function bgExitHandler1(e) {
Enabler.exitOverride('Background Exit1', 'URL');
}
function exitClose(e) {
Enabler.reportManualClose();
Enabler.close();
}
document.getElementById('exit').addEventListener('click', bgExitHandler1, false);
document.getElementById('close_btn').addEventListener('click', exitClose, false);
</script>
<head>
I realized that the issue was caused by the fact that I chose the wrong format. I needed to choose 'interstitial' in order for it to work with my files.
I'm using d3.interval instead of the javascript setInterval. The problem is that I don't know how to stop it, since I was using ClearInterval and it clearly doesn't work.
Thanks.
Use method stop for this. This method works for both d3.timer and d3.interval;
var interval = d3.interval(function(elapsed) {
if (elapsed > 2600) {
interval.stop(); // <== !!!
return;
}
console.log(elapsed);
}, 500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
The standard admin toolbar buttons have the possibility that you can give them a message. For example: a "really delete" message or something...
JToolBarHelper::deleteList('Do you wanna really delete?', 'controller.delete');
Is that also possible for a custom button? In the documentation is no parameter for this. http://docs.joomla.org/JToolBarHelper/custom
Did Joomla have another solution? Show the user a message and after his confirmation... execute my code! Is that possible?
Sorry for my bad english :)
thanks!
Sure it is possible :)
Simply add to your component template view (for example:)
administrator/components/com_yourcomponent/views/your_view/tmpl/default.php
this code:
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
if (task == 'customcontroller.delete')
{
if (confirm(Joomla.JText._('Do you really want to delete these items?'))) {
Joomla.submitform(task);
} else {
return false;
}
}
}
</script>
Just change the task and edit the message and you should be ready to go
Add this code to this url :
administrator/components/com_yourcomponent/views/your_view/tmpl/default.php
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
if (task == 'customcontroller.delete')
{
if (confirm('Do you really want to delete these items?')== true)
{
Joomla.submitform(task);
}
else {
return false;
}
}
else
{
Joomla.submitform(task);
}
}
</script>
Hi all i have table which has a bulk data and a Screen for showing this data..i want o show data to the users like this
if a user goes to this screen i have to display only the first twenty of the records of my Database and when he wants to see more and scrolls down the data should be loaded on scroll down and i should show him again the Other 20 records of my DB..so as he scroll s down the page should load with that data should be populated to the page
i have been searching about this a lot but didn't get what i wanted...or how can i do this....can any one tell me how can i do this...
Rob Conery wrote a great blog post about this
He uses JQuery to make an ajax call to his controller to load more data. Here's the method he uses to load more:
<script type="text/javascript">
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadMore();
}
});
var current=0;
function loadMore() {
if (current > -1) {
current++;
$('#loading').html("<img src='/content/images/bigloader.gif' />");
$.get("/archive/index/" + current,
function(data) {
if (data != '') {
$('#results').append(data);
$('#loading').empty();
} else {
current = -1;
$('#loading').html("<h3><i>-- No more results -- </i></h3>");
}
});
}
}
</script>
I'm using this jquery plugin ajaxFileupload in our project. My design is I have a file upload control and set the opacity to 0.01 and then using an anchor link, I trigger the file upload control click event. This works fine until I try to click the anchor link the second time which it doesn't open the file dialog box.
Here is my code.
$(".btnUpload").live("click", function () {
$(".lblUploadError").text("");
$(".fleAttachment").trigger("click");
});
$(".fleAttachment").change(function () {
var reg = /^.*\.(jpg|JPG|gif|GIF|jpeg|JPEG)$/;
var vals = $(this).val(),
val = vals.length ? vals.split("\\").pop() : "";
if (reg.test(vals) == false) {
$(".lblUploadError").text("Invalid Image Type. We only accept .GIF or .JPG");
} else {
ajaxFileUpload();
eval($(".btnRefreshAttachmentList").attr("href"));
}
});
I don't see any error in the console so it makes it difficult to debug it.
Change
$(".fleAttachment").change(function() {
to
$(".fleAttachment").live('change', function() {
$( document ).on( "click", ".fleAttachment", function() {
//--> Logic Here // jQuery 1.7+
});
this.value="";
at the end should work