So, I built a small website using Alvaro Trigo's Fullpage.js. I have been trying to incorporate Google DFP ads throughout the site and have had a lot of problems as I am very weak when it comes to Javascript. What I have been able to do so far is to use the afterLoad callback option to include both Google analytics and Jquery DFP. It's very hacky looking, but here is the code I have:
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'sponsors', 'self-breast-exam', 'screening', 'treatment', '2015-luncheon', '2014-luncheon', 'non-profit-organizations', 'news', 'events', 'contact'],
menu: '#menu',
paddingTop: '37px',
autoScrolling: true,
scrollBar: true,
slidesNavigation: false,
normalScrollElements: ('#feed-control, #feed-control2'),
fitToSection: true,
scrollOverflow: true,
afterLoad:
function(anchorLink, index){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3905646-12', 'domain.nl');
ga('send', 'pageview', { 'page': anchorLink, 'title': anchorLink });
$(".selfexamAd").dfp({
dfpID: '422616648',
collapseEmptyDivs: 'original',
sizeMapping: {
'my-default': [
{browser: [1024, 768], ad_sizes: [728, 90]},
{browser: [600, 0], ad_sizes: [468, 60]},
{browser: [500, 0], ad_sizes: [320, 50]},
{browser: [0, 0], ad_sizes: [320, 50]}
]}
});
},
});
});
</script>
This seems to more or less accomplish what I am trying to do, but the problem I am having seems to be with sections that trigger the scrollOverflow option. It seems that scrolling with the mouse wheel stops at the end of sections where the content extends vertically beyond the Viewport. You are then unable to scroll to the next section using the mouse wheel. Sections that don't overflow seem unaffected and scroll normally using the mouse wheel. Does anybody know what I can do to fix the problem?
Related
Have anyone tried using these together? I am trying to inject JQuery mobile slide switch inside the Kendo Grid template control and it doesn't seem to work:
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: false,
sortable: true,
pageable: true,
selectable: true,
scrollable: false,
columns: [
{
field: "Firstname",
title: "First Name"
},
{
template: "<select data-role='slider'><option value='0' selected>Yes</option><option value='1'>No</option></select>", title: ""
}
]
});
I've tried looking it up at the jquery mobile's pagebeforecreate and pagecreate event and the select is still not existing at this point, I've made a workaround with the JQuery Mobile button by manually adding the css class, but looking at the raw html of the slide switch its more complex than hooking up a button.
Cheers!
I am trying to upload file with jqgrid, but the is some mistake in my code.
I am using onInitializeForm method.
I am using Jquery Ajax File Uploader
Can anyone do help to me?
You can see Error in screenshot
This is my code.
jQuery("#formGrid").jqGrid(
{
url:'application/ajax/common_form_detail.php?form_id='+form_id,
editurl:'application/ajax/common_form_edit.php?form_id='+form_id,
datatype: "json",
colNames:[<?php echo $strfield; ?>],
colModel:[<?php echo $strFieldModel; ?>],
rowNum:20,
rowList:[20,50,100],
pager: '#formControl',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
autowidth: true,
height: 400,
width: 900
});
jQuery("#formGrid").jqGrid('navGrid','#formControl',
{ edit:true,add:true,del:true,search:false},
{width:780,recreateForm:true},
{width:780,recreateForm:true
,onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}, afterSubmit : function(response, postdata){
$.ajaxFileUpload({
url: 'application/ajax/common_file_upload.php',
secureuri:false,
fileElementId:'STUDENT_AVATAR',
dataType: 'json',
success: function (data, status) {
alert("Upload Complete.");
}
});
}
});
});
One can see that you have error in jQuery.handleError function which is depreciated from jQuery 1.5. jQuery Ajax File Uploader V2.1 provided from the download page included jQuery 1.2.1.
One have to fix the code of Ajax File Uploader to solve the problem. See the answer and the answer for example or this one. You can consider to use another Plugin for file upload like jQuery Form Plugin (and here), see here.
I am using Jquery dialog box for Confirmation and alert purposes...
This is my code...
$( "#dialog-confirm" ).dialog({
resizable: false,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
I am not getting any error. So far it's working fine, but it seems the performance is a bit slow. My question is if any performance issue will come in the future? If any performance issue does occur, how would I avoid that?
Please help me with this and correct me if I am wrong in anything.
It is very unlikely that this snippet is slow now or in the future - have you tried timing it? It is possible that you have some other code in the page that is being triggered by this call but we'd need to see the whole page to be able to investigate this.
Firebug has a decent JavaScript profiler to help you find performance issues.
I have used a tutorial http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html to dynammically load an aspx page into a jquery ui dialog without using an iframe
eg.
$(function() {
$('<div>').dialog({
autoOpen: true,
modal: true,
open: function() {
$(this).load('Example.aspx');
},
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
});
When I debugged this page it just loading a blank dialog box with none of the content in even though the page has content. I have written it with the paths
eg $(this).load('/Home/Example.aspx');
I have even added in a function to check if it is loading
eg $(this).load('/Home/Example.aspx', function(){alert(Load Successful);}); which does return true YET still no content in the dialog
I am using Jquery 1.3.2 an ui 1.7.3 with ASP.Net Mvc
I know there are lots of questions/answers on this topic on stackoverflow but none of them seem to be successfully answering my problem and as these questions seem a year old not sure whether someone will get back to me asap.
Any ideas on showing the content in the dialog
Thank you
Just a thought, try changing your selector to
$('<div></div>').dialog({
Also the example you cited is using jquery 1.4.2 and jquery ui 1.8.1,
can you upgrade?
Edit:
You could also try it this way.
$(function() {
$('<div></div>').load('Example.aspx', {},
function(data) {})
.dialog(
{
autoOpen: true,
modal: true,
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
}).dialog('open');
});
Note I haven't tested this, but its the way I do it. Hopefully you get the idea.
The answer is...
$(function() {
$('<div></div>').hide().load('Home/Example #content_form', function() {
$(this).dialog({
autoOpen: true,
modal: true,
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
})
})
With Example.aspx having a tag with ID = content_form
as the title says....
this is what I have tried but not working
$('#uxReferralAssessmentDetailsDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
title: "Referral Assessment",
buttons: { "Save":{ id: 'uxbtnSaveAssessment', click:othis.OnAssessmentSave}, "Cancel": function() { $(this).dialog("close"); } }
});
I am using selenium and instead of the horrid xpath I want to use the id of each element to simplify the xpath
any ideas welcome
If you are having a hard time determining id as and other things that are being added to the html page by javascript on the fly. Try using a development tool for web browsers like firebug which is an addon for firefox:
See link for firebug addon for more information:
https://addons.mozilla.org/en-US/firefox/addon/1843