Develop Reference

'Close' button does not work in javascript

In the mobile version on my form appears 'Close' button.
Unfortunately, it does not work. I see a normal button, but when I click there is no reaction. In the javascript I load the file form-with-button.html to render form content in my all .html files.
<div id="form-with-button">
</div>
and use javascript to show and close.
//Onload show header and footer content
$("#header").load('header.html', function(){
$('#nav').affix({
offset: {top: $('#header').height()-$('#nav').height()}
});
});
$("#footer").load('footer.html');
$("#contact").load('footer-contact.html');
$("#form-with-button").load('form-with-button.html');
// Sticky Buttons Show Hide
$("#fix-quote, #fix-contact").on("click", function() {
var body = $("body");
var openPos= ["",""];
var id = $(this).attr("id");
var content = $("#"+id+"-content");
var property = (content.attr("class").toString().indexOf("left") > -1)? "left": "right";
if (!body.hasClass("bd_"+id)) {
openPos= [0,380]
var ele = $(this);
body.addClass("bd_"+id)
setTimeout(function(){
body.on("click.fix",function(ev) {
if($(ev.target).closest(".fixed-container").length == 0){
$(ele).click()
}
});
},10);
} else {
body.removeClass("bd_"+id).off("click.fix");
}
content.css("top","").show().css(property, openPos[0]);
$(this).css(property, openPos[1]);
});
// Mobile Requests Showhide
$("#fix-quote-mob, #fix-contact-mob").on("click", function() {
var id = $(this).attr("id").slice(0,-4);
var content = $("#"+id+"-content");
content.show()
setTimeout(function(){
content.css("top",0)
},10)
});
$(".fix-contact-close").on("click", function() {
var content = $(this).closest(".fixed-container");
content.css("top","").delay(400).hide(0);
});
Please help, why my button does not work?

You are trying to add a handler to an element created in a dynamic way, so you need to refactor your code in order to make it work:
$(document).on("click", ".fix-contact-close", function() {
var content = $(this).closest(".fixed-container");
content.css("top","").delay(400).hide(0);
});

Touch events are not working on Modal Popup

I am having one simple and complicated problem in touch events on Modal Popup window. In my popup I have displayed one image, for that image I am firing touch event BUT its works some time and NOT work almost all times.
Second problem is on that Modal popup only: Swipe events are not at all firing.
What might be the problem?
Below are warnings I am getting in Logcat:
For every touch on Modal popup I am getting this
W/webview(5558): Stale touch event ACTION_DOWN received from webcore; ignoring
For swipe on Modal popup I am getting:
11-14 12:42:09.420: W/webview(5558): Miss a drag as we are waiting for WebCore's response for touch down.
Funny thing is only on Modal popup its happening NOT a all screens.
Any help would be greatly appreciated
Below javascript code I am using for Modal Popup
var modal = (function() {
var method = {}, $overlay, $modal, $content, $close;
// Center the modal in the viewport
method.center = function() {
var top, left, position;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top : top + $(window).scrollTop(),
left : left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function(settings) {
$content.empty().append(settings.content);
$modal.css({
width : settings.width || 'auto',
height : settings.height || 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Close the modal
method.close = function() {
// alert("Called close method");
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
// $screen = $()
$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function() {
$('body').append($overlay, $modal);
//Here tried with image id, div id and modal BUT No work
document.getElementById("content").addEventListener( 'touchstart',
function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
var flag = confirm("Are you sure want to defuse it?")
if (flag == true) {
$('#bombImg').attr('src', 'img/undefused.png');
} else {
$('#bombImg').attr('src', 'img/bomb01.png');
}
touchEvent.preventDefault();
modal.close();
}
});
return method;
}());
// Wait until the DOM has loaded before querying the document
//this method calling from another HTML file
function showDialog(e) {
disableZoomButtons();
$.get('popUp.html', function(data) {
modal.open({
content : data
});
});
document.ontouchmove = function(e) {
return false;
}
modal.open({
content : "<div id='imgDiv'><img id='bombImg' src='img/bomb01.png'/><br>"
+ "</div>"
});
e.preventDefault();
}
Please anybody help me to get resolve this.
I am running this app in Android 4.0+

You have to place your onStart() function outside of doc ready:
function onStart ( touchEvent ) {
var flag = confirm("Are you sure want to defuse it?")
if (flag == true) {
$('#bombImg').attr('src', 'img/undefused.png');
} else {
$('#bombImg').attr('src', 'img/bomb01.png');
}
touchEvent.preventDefault();
modal.close();
}
$(document).ready(function() {
$('body').append($overlay, $modal);
//Here tried with image id, div id and modal BUT No work
document.getElementById("content").addEventListener( 'touchstart',
function(e){ onStart(e); }, false );
});

JS if there is a slider show it

I'm no JS expert but I'm trying to alter this so that if there is a royalslider display it… if there isn't display the static image and the title and description. Any ideas as to why this isn't working? my head is currently spinning… I've left some space around the section I'm trying to add to the code under //royal slider fix and currently its just showing the title and description from the if statement. But, the markup is showing the slider div and outputting the code.
Any help would be very appreciated! You can preview this code and what I'm trying to do here... http://bvh.delineamultimedia.com/?page_id=2
;(function($) {
$.fn.SuperBox = function(options) {
var superbox = $('<div class="superbox-show"></div>');
var superboximg = $('<img src="" class="superbox-current-img">');
var superboxclose = $('<div class="superbox-close"></div>');
superbox.append(superboximg).append(superboxclose);
return this.each(function() {
$('.superbox').on('click', '.superbox-list', function() {
//allows for superbox to work inside of quicksand
$('ul.filterable-grid').css({overflow: 'visible'});
var currentimg = $(this).find('.superbox-img');
superbox.find('.title').remove();
superbox.find('.description').remove();
var imgData = currentimg.data();
superboximg.attr('src', imgData.img);
if (imgData.title) { superbox.append('<h3 class="title">'+imgData.title+'</h3>'); }
if (imgData.description) { superbox.append('<div class="description">' + imgData.description + '</div>'); }
//royal slider fix
superbox.find('.royalSlider').remove(); // remove the slider from previous events
var imgData = currentimg.data();
var sliderData = currentimg.next('.royalSlider'); // grab the slider html that we want to insert
superboximg.attr('src', imgData.img);
if (sliderData) { // show the slider if there is one
superbox.clone().append(sliderData); // clone the element so we don't loose it for the next time the user clicks
} else { // if there is no slider proceed as before
if (imgData.img) {
superbox.append(imgData.img);
}
if (imgData.title) {
superbox.append('<h3 class="title">' + imgData.title + '</h3>');
}
if (imgData.description) {
superbox.append('<div class="description">' + imgData.description + '</div>');
}
}
if($('.superbox-current-img').css('opacity') == 0) {
$('.superbox-current-img').animate({opacity: 1});
}
if ($(this).next().hasClass('superbox-show')) {
superbox.toggle();
} else {
superbox.insertAfter(this).css('display', 'block');
}
$('html, body').animate({
scrollTop:superbox.position().top - currentimg.width()
}, 'medium');
});
$('.superbox').on('hover', '.superbox-list', function(e) {
$(this).find('.overlay').stop()[(e.type == 'mouseenter') ? 'fadeIn' : 'fadeOut']('slow');
});
$('.superbox').on('click', '.superbox-close', function() {
$('.superbox-current-img').animate({opacity: 100}, 200, function() {
$('.superbox-show').slideUp();
});
});
});
};
})(jQuery);

This is only intended to be hints, not an attempt to solve the entire problem.
Try this:
var superbox = $('<div class="superbox-show"/>');
var superboximg = $('<img src="" class="superbox-current-img"/>');
var superboxclose = $('<div class="superbox-close"/>');
if (sliderData.length > 0)
Where is imgData.img getting its value?

Modify collapse.js to get addtional data from xml when expanding fieldset in Drupal 7?

In drupal i have generated a list where each item is a fieldset with collapsible, that can contain extra information.
Because of the rather large list i want to avoid loading the extra information until a user clicks on the fieldset.
Best case scenario:
User clicks on collapsed fieldset.
Fieldset loads extra information.
Fieldset uncollapses.
I've copied and loaded the copy of collapse.js into my form, but I'm very new to js and jQuery, so I'm a little lost. If someone can show me how to call a function the first time the fieldset is expanded, I'm sure i can figure out the rest.
I've included the code from collapse.js:
(function ($) {
//Toggle the visibility of a fieldset using smooth animations.
Drupal.toggleFieldset = function (fieldset) {
var $fieldset = $(fieldset);
if ($fieldset.is('.collapsed')) {
var $content = $('> .fieldset-wrapper', fieldset).hide();
$fieldset
.removeClass('collapsed')
.trigger({ type: 'collapsed', value: false })
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
$content.slideDown({
duration: 'fast',
easing: 'linear',
complete: function () {
Drupal.collapseScrollIntoView(fieldset);
fieldset.animating = false;
},
step: function () {
// Scroll the fieldset into view.
Drupal.collapseScrollIntoView(fieldset);
}
});
}
else {
$fieldset.trigger({ type: 'collapsed', value: true });
$('> .fieldset-wrapper', fieldset).slideUp('fast', function () {
$fieldset
.addClass('collapsed')
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
fieldset.animating = false;
});
}
};
//Scroll a given fieldset into view as much as possible.
Drupal.collapseScrollIntoView = function (node) {
var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
var posY = $(node).offset().top;
var fudge = 55;
if (posY + node.offsetHeight + fudge > h + offset) {
if (node.offsetHeight > h) {
window.scrollTo(0, posY);
}
else {
window.scrollTo(0, posY + node.offsetHeight - h + fudge);
}
}
};
Drupal.behaviors.collapse = {
attach: function (context, settings) {
$('fieldset.collapsible', context).once('collapse', function () {
var $fieldset = $(this);
// Expand fieldset if there are errors inside, or if it contains an
// element that is targeted by the uri fragment identifier.
var anchor = location.hash && location.hash != '#' ? ', ' + location.hash : '';
if ($('.error' + anchor, $fieldset).length) {
$fieldset.removeClass('collapsed');
}
var summary = $('<span class="summary"></span>');
$fieldset.
bind('summaryUpdated', function () {
var text = $.trim($fieldset.drupalGetSummary());
summary.html(text ? ' (' + text + ')' : '');
})
.trigger('summaryUpdated');
// Turn the legend into a clickable link, but retain span.fieldset-legend
// for CSS positioning.
var $legend = $('> legend .fieldset-legend', this);
$('<span class="fieldset-legend-prefix element-invisible"></span>')
.append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.prependTo($legend)
.after(' ');
// .wrapInner() does not retain bound events.
var $link = $('<a class="fieldset-title" href="#"></a>')
.prepend($legend.contents())
.appendTo($legend)
.click(function () {
var fieldset = $fieldset.get(0);
// Don't animate multiple times.
if (!fieldset.animating) {
fieldset.animating = true;
Drupal.toggleFieldset(fieldset);
}
return false;
});
$legend.append(summary);
});
}
};
})(jQuery);

It looks to me like you'd have to override the whole Drupal.toggleFieldset function (just like when you are overriding a Drupal theme function.
You could perhaps add a class to the fieldset in FormAPI then catch it in the complete function of the $content.slideDown params and fire a custom function of yours, to add a 'loading' graphic and make your ajax request.
I'm assuming from your question that you are familiar enough with FormAPI/jQuery.ajax() to have a go. But let me know if not and i'll include some snippets
EDIT
Here is some example code, it'd take a quite a while to setup a test environment for this, so it'just a pointer (cant create a JS fiddle for this ;))
You might add your fieldset like this in PHP
$form['my_fieldset'] = array(
'#type' = 'fieldset',
'#title' = t('My fieldset'),
'#collapsible' = true,
'#collapsed' = true,
'#attributes' => array(
'class' => array('ajax-fieldset'),
'rel' => 'callback/url/path' // random attribute to store the link to a menu path that will return your HTML
)
);
$form['my_fieldset'] = array(
'#markup' => '<div class="response">loading...</div>'
);
You'll also obviously have setup a menu hook returning your themed data # callback/url/path. IMO it's better to return JSON data and theme them in with JS templating, but the Drupal way (for the moment at least) seems to be to render HTML in the menu hook callback function.
Then here is the JS. I've only included the altered complete function, rather than reproduce what you pasted. Add the complete function in to a copy of the code the re-specify the core Drupal function in your own JS file
$content.slideDown({
complete: function () {
Drupal.collapseScrollIntoView(fieldset);
fieldset.animating = false;
if($fieldset.hasClass('ajax-fieldset')) {
$.get(
Drupal.settings.basePath + $fielset.attr('rel'),
function(data) {
$fieldset.find('.response').html(data);
}
)
}
}
});
Or, rather than messing around with the collapsible function. just create your own fieldset without the collapsible/collapsed classes and implement from scratch yourself
....so.. something like that :)

More Efficient Nav Effects

I just need to know if there is a more efficient way of writing this block of code for transition effects on my navigation menu. It's using ajax transitions if you're wondering why I don't just apply each class individually.
here's the javascript code:
var navA = $('#nav a'),
aboutBtn = $('#aboutBtn'),
portfolioBtn = $('#portfolioBtn'),
resumeBtn = $('#resumeBtn'),
photoBtn = $('#photoBtn');
navA.on('click', function(e) {
var $this = $(this);
e.preventDefault();
// if the resumeBtn is clicked
if ($this.attr('id') == 'resumeBtn') {
// Portfolio
portfolioBtn.removeClass('portfolioActive');
portfolioBtn.addClass('portfolio');
//About Me
aboutBtn.removeClass('aboutActive');
aboutBtn.addClass('about');
// Photo
photoBtn.removeClass('photoActive');
photoBtn.addClass('photo');
// Resume
resumeBtn.removeClass('resume');
resumeBtn.addClass('resumeActive');
}
// If portfolioBtn Is Clicked
else if ($this.attr('id') == 'portfolioBtn') {
// About
aboutBtn.removeClass('aboutActive');
aboutBtn.addClass('about');
// Resmue
resumeBtn.removeClass('resumeActive');
resumeBtn.addClass('resume');
// Photo
photoBtn.removeClass('photoActive');
photoBtn.addClass('photo');
// Portfolio
portfolioBtn.removeClass('portfolio');
portfolioBtn.addClass('portfolioActive');
}
// If photoBtn Is Clicked
else if($this.attr('id') == 'photoBtn') {
// About
aboutBtn.removeClass('aboutActive');
aboutBtn.addClass('about');
// Portfolio
portfolioBtn.removeClass('portfolioActive');
portfolioBtn.addClass('portfolio');
// Resume
resumeBtn.removeClass('resumeActive');
resumeBtn.addClass('resume');
// Photo
photoBtn.removeClass('photo');
photoBtn.addClass('photoActive');
}
// If aboutBtn is clicked
else if ($this.attr('id') == 'aboutBtn') {
// Portfolio
portfolioBtn.removeClass('portfolioActive');
portfolioBtn.addClass('portfolio');
// About Me
aboutBtn.removeClass('about');
aboutBtn.addClass('aboutActive');
// Resume
resumeBtn.removeClass('resumeActive');
resumeBtn.addClass('resume');
// Photo
photoBtn.removeClass('photoActive');
photoBtn.addClass('photo');
};
});
Html:
<div id="nav">
<a class="resume" href="resume.html" id="resumeBtn">Resume</a>
<a class="portfolio" href="portfolio.html" id="portfolioBtn">Portfolio</a>
<a class="photo" href="photos2.html" id="photoBtn">Photos</a>
<a class="aboutActive" href="index.html" id="aboutBtn">About Me</a>
</div>
The CSS classes uses images for the transitions, but either way. I just wanna know if there's a more efficient way to write my jQuery. I'm sure there is I'm just having a stupid moment. Thanks!
EDIT: I'm structuring the code differently in how it handles the panel switches and this section of code is just designed to handle the Nav transitions.
So essentially, I removed the bottom of eachIFstatement so it only handles the the nav transitions.

Well, if your panels have the same HTML structure as your navs, this will work:
$('#nav a').on('click', function (e) {
e.preventDefault();
//Buttons
$('#' + this.id).addClass('active').siblings().removeClass('active');
// Panels
$('#' + this.id.slice(0, this.id.lastIndexOf('Btn')) + 'Panel').show().siblings().hide();
notworkOn = false;
switch (this.id) {
case 'portfolioBtn':
handlePortfolio();
break;
case 'aboutBtn':
handleAbout();
break;
}
});
function handlePortfolio() { arrange(); }
function handleAbout() {
arrange();
$('#header .inner').animate({ width: '100%' }, 600);
}
That assumes your panels HTML structure is similar to your Buttons, and named resumePanel etc. Sample here: http://jsfiddle.net/9vwYm/1/
Edit: Your current code seems to have some inconsistencies in it, e.g. clicking the Photo button displays the Photo panel, and then when you click on About, the Photo panel is not hidden. Is this intentional?

A bit messy, but twice as short and wo/ repetitive error-prone parts.
var pages = [
{ title: 'about',
showPanel: aboutPanel,
dontHidePanels: [photoPanel, resumePanel],
extracode: function() {
notworkOn = false;
arrange();
$('#header .inner').animate({
width: '100%'
}, 600);
}
},
{ title: 'protfolio',
showPanel: horizon,
dontHidePanels: [resumePanel],
extracode: function() {
arrange()
notworkOn = false;
}
},
{ title: 'resume',
showPanel: resumePanel,
dontHidePanels: [servicesPanel],
extracode: function() {
notworkOn = false;
}
},
{ title: 'photo',
showPanel: photoPanel,
dontHidePanels: [resumePanel],
extracode: function() {
notworkOn = false;
}
}
];
var panels = [ aboutPanel, horizon, photoPanel, resumePanel, servicesPanel];
$('#nav a').on('click', function(e) {
e.preventDefault();
var curPageTitle = this.id.match(/(\w+)Btn/)[1];
var p = null;
for (var i = 0; i < pages.length; i++) {
if (pages[i].title == curPageTitle) {
$('#' + pages[i].title + 'Btn')
.removeClass(pages[i].title + 'Active')
.addClass(pages[i].title);
p = pages[i];
} else {
$('#' + pages[i].title + 'Btn')
.removeClass(pages[i].title)
.addClass(pages[i].title + 'Active');
}
}
for (var i = 0; i < panels.length; p++) {
if (panels[i] == p.showPanel) {
panels[i].css('display', 'block');
} else if ($.inArray(panels[i], p.dontHidePanels) != -1) {
panels[i].css('display','none');
}
}
p.extracode();
});

I would change your class structure to use a separate active class:
<div id="nav">
<a class="resume" href="resume.html" id="resumeBtn">Resume</a>
<a class="portfolio" href="portfolio.html" id="portfolioBtn">Portfolio</a>
<a class="photo" href="photos2.html" id="photoBtn">Photos</a>
<a class="about active" href="index.html" id="aboutBtn">About Me</a>
</div>
And then do this with the script (EDIT missed the fact that your header animation was only for the about, so changed that below):
$('#nav a').on('click', function(e) {
var $this = $(this);
e.preventDefault();
//Toggle active
$this.parent().find('.active').toggleClass('active');
$this.toggleClass('active');
//Hide All Panals
horizon.css('display','none');
aboutPanel.css('display','none');
photoPanel.css('display', 'none');
resumePanel.css('display', 'none');
//Show Correct Panel
switch($this.id){
case 'resumeBtn':
resumePanel.css('display', 'block');
break;
case 'portfolioBtn':
horizon.css('display','block');
break;
case 'photoBtn':
photoPanel.css('display','block');
arrange();
break;
case 'aboutBtn':
aboutPanel.css('display','block');
arrange();
$('#header .inner').animate({
width: '100%'
},600);
break;
}
notworkOn = false;
};
});