div does not react under circumstances

div does not react under circumstances - javascript

i'm doing a website for a friend of mine and I have some really wierd behaviur here, which I totally cannot understand.
main navigation
about
pictures
videos
files
contanct
in pictures and in videos, there are categorys, when you switch between the categorys, the title of the current catgeory is loaded in a DIV with the id contentRowTitle
$("#contentContainer").delegate(".catBit", "click", function() {
var catID = $(this).attr('data-id');
var pwd = $(this).attr('data-pwd');
var catType = $(this).attr('data-type');
$('#contentRowTitle').slideUp(function() {
$('.thumbContainer').fadeOut(function() {
if(pwd != "") {
$('#loginRow').show();
$('#contentRowTitle').load('./'+catType+'/contentImagesHeader?id='+catID, function() {
$('#contentRowTitle').slideDown();
});
} else {
$('#contentRowTitle').slideUp('slow', function() {
$('#contentRowTitle').load('./'+catType+'/contentHeader?id='+catID, function(responseText) { alert(responseText);
$('#contentRowTitle').slideDown();
});
});
}
$('.thumbContainer').load('./'+catType+'/contentImages?id='+catID, function() {
$('.thumbContainer').fadeIn();
//$('#thumbContainer').slideDown();
});
});
});
});
now everyhting seems to work fine.. BUT if you go to pictrures, and click on some thumbnails
(this is the function that is beeingexecuted when you click on some thumbs in a category)
$(".contentBox").delegate(".imgPreview", "click", function() {
var id = $(this).attr('data-id');
$('#wrap').fadeOut(function() {
$('#showDetailLoader').fadeIn(function() {
$('.galMainImg').attr('data-id', id);
$('#showDetail').load('./gal/show?id='+id, function() {
$('#showDetailLoader').fadeOut(function() {
$('#showDetail').fadeIn();
$('.galTitle').textillate({ in: { effect: 'flipInY' } });
$.getJSON('./gal/statsAdd?id='+id, function( data ) {
});
});
});
});
});
});
.. and now you go to videos and switch between the categorys... the DIV contentRowTitle does not react to anything.. I have put an alert inside the load() callback and it shows up.. but why does the output of the load-URL not show up in the DIV ???

Related

Javascript - How to load content depends on url

I have 2 buttons and when we click it redirects to different pages with window.location.replace and in document ready I put 2 if's for each click button. But what happens is when I click it entry inside both if's and should not.
My click function:
$('a[href="#reception-supplier"]').on('click', function()
{
var type = $(this).attr('data-type');
$.get("/reception-type/"+type, function(data)
{
$('.popup').html('');
$('.popup').append(data);
$('.popup').fadeIn(300);
$('.loading').fadeOut(300);
$('.inputDossie').select2();
$('.enter-reception-order').on('click', function()
{
var supplierId = $('#supplierChoose option:selected').val();
window.location.replace("/reception-order-header-supplier/"+supplierId);
});
});
});
The second function click:
$('a[href="#reception-order"]').on('click', function()
{
$.get("/reception-type/"+type, function(data)
{
$('.popup').html('');
$('.popup').append(data);
$('.popup').fadeIn(300);
$('.loading').fadeOut(300);
$('.input-order').focus();
$('.enter-reception-order').on('click', function()
{
$('.error-message-reception').fadeOut(300);
$('.error-message-reception .error').remove();
var orderId = $('.input-order').val();
$.get("/verify-reception-order/"+orderId, function(validOrder)
{
window.location.replace("/reception-order-header/"+orderId);
});
});
});
});
And in document ready I put this 2 if's:
$(document ).ready(function()
{
if(window.location.href.match('/reception-order-header-supplier/?') !== null)
{
alert('1');
}
if(window.location.href.match('/reception-order-header/?') !== null)
{
alert('2');
}
});
How can I resolve this issue or what are the alternatives?
Thank you

Accordion open when page loads

I have an accordion where open/closes on click. However I would like the accordion to be open when the page loads. Does anyone know what I need to add/remove from the below code? all suggestions are welcome.
reviewsLink.on('click', function() {
util.scrollBrowser(feefoCont.offset().top - 97);
$('.js-feefo-content').delay(500).slideDown();
if (reviewstitle.text() === originaltitle) {
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
}
});
reviewsLinkM.bind('click', function() {
util.scrollBrowser(feefoContM.offset().top);
$('.js-feefo-toggle.pdp-main__feefo-slot__toggle.js-slot-accordion.pdp-main__slot--accordion').delay(500).slideDown();
feefoContM.find('h3').addClass('pdp-main__tab--icon-minus');
});
var reviewsCont = $('.pdp-main__feefo-slot .js-reviews-toggle'),
reviewsClose = $('.js-feefo-content').find('.js-feefo-close');
reviewsCont.bind('click', function() {
$('.js-feefo-content').slideToggle();
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
});
reviewsClose.bind('click', function() {
$('.js-feefo-content').slideUp();
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
});
}
};

Javascript / Jquery file combination

I'm trying to include this snippet of code:
;(function($) {
'use strict'
var ajaxContactForm = function() {
// http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html
$('.contact-form').each(function() {
var $this = $(this);
$this.submit(function() {
var str = $this.serialize();
$.ajax({
type: "POST",
url: $this.attr('action'),
data: str,
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
var result;
if(msg == 'OK') {
result = '<div class="notification_ok">Thank you! Your message has been sent!</div>';
} else {
result = msg;
}
result = '<div class="result">' + result + '</div>';
$this.find('.note').html(result);
}
});
return false;
}); // submit
}); // each contactform
}; // contact
// Dom Ready
$(function() {
ajaxContactForm();
// Initialize responsive menu
ResponsiveMenu.initial($(window).width());
$(window).resize(function() {
ResponsiveMenu.menuWidthDetect($(this).width());
});
// Detect elements into viewport
$('[data-waypoint-active="yes"]').waypoint(function() {
$(this).trigger('on-appear');
}, { offset: '90%' });
$(window).on('load', function() {
setTimeout(function() {
$.waypoints('refresh');
}, 100);
});
});
})(jQuery);
Into this file:
http://rocketgram.co/js/custom.js
However whenever I try and merge the two correctly (Or what I thought) I can only get one or the other working at once. Not both. Can anyone share any light on why these are conflicting?
Here's a few reference links on both of them working, singularly:
rocketgram.co/mainjs.html
rocketgram.co/customjs.html
And here's the file in the snipped above:
rocketgram.co/js/main.js

What does this BlackBerry Web App Javascript code do?

I know my way around several programming languages but am struggling understanding Javascript and how it's used in mobile apps. I'm developing for BlackBerry and a using the BlackBerry 10 jQuery Mobile Theme. I'm looking at the App.js from the samples and am confused as to what the App object is.
App = {};
App.init = function () {
console.log("App Init");
App.utils.metaHack();
$("#activity").live("pageinit", function(){
App.page.activity.init();
});
$("#bb_activity").live("pageinit", function(){
App.page.bb_activity.init();
});
$("#progressPage").live("pageinit", function(){
App.page.progress.init();
});
$("#sliderPage, #sliderPageDark").live("pageinit", function(){
App.page.slider.init();
});
$("#togglePage, #togglePageDark").live("pageinit", function(){
App.page.toggle.init();
});
$("#actionBarSample").live("pageinit", function() {
App.page.actionBarSample.init();
});
$('#applicationMenu').live("pageinit", function() {
App.page.applicationMenu.init();
});
}
App.utils = {
metaHack: function () {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
}
}
App.page = {
activity: {},
bb_activity: {},
progress: {},
slider: {},
toggle: {},
actionBarSample: {},
applicationMenu: {}
}
App.page.activity.init = function() {
$('#show').on('click', function () {
$.mobile.loading('show');
});
$('#text').on('click', function() {
$.mobile.loading('show', {
text: 'Loading',
textVisible: true,
textonly: true,
theme: 'a'
});
});
$('#swatch-a').on('click', function() {
$.mobile.loading( 'show', {
text: 'Loading',
textVisible: true,
theme: 'a'
});
});
$('#swatch-a-notext').on('click', function() {
$.mobile.loading( 'show', {
theme: 'a'
});
});
$('#swatch-c').on('click', function() {
$.mobile.loading( 'show', {
text: 'Loading',
textVisible: true,
theme: 'c'
});
});
$('#swatch-c-notext').on('click', function() {
$.mobile.loading( 'show', {
theme: 'c'
});
});
$('#hide').on('click', function () {
$.mobile.loading('hide');
});
}
App.page.bb_activity.init = function() {
console.log("bb_activity");
$('#throttle').on('change', function () {
console.log("throttle");
var speed = $('#throttle').val();
$('#speedTest').activityindicator('speed', speed+'s');
});
}
App.page.progress.init = function() {
var p = 0;
var error = pause = false;
function watchProgress() {
if( p > 100 || error || pause) {
return;
}
$('#rogress').progressbar("setValue", p);
p+= 4;
setTimeout(watchProgress, 100);
}
$('#start').on('vclick', function () {
error = false;
watchProgress();
});
$('#error').on('vclick', function () {
$('#rogress').progressbar("setError", error = !error);
});
$('#pause').on('vclick', function () {
$('#rogress').progressbar("pause", pause = !pause);
});
$('#reset').on('vclick', function () {
p = 0;
error = pause = false;
$('#rogress').progressbar("setValue", p);
});
}
App.page.slider.init = function() {
$('#slider-disabled').slider('disable');
$('#slider-disabled-highlight').slider('disable');
}
App.page.toggle.init = function() {
console.log("toggle init");
$('#flip-disabled').slider('disable');
}
App.page.actionBarSample.init = function() {
var $tabo = $("#tover"),
overflowState = $tabo.hasClass("noContent");
$("#left").on("panelbeforeopen", function() {
//Save the state of the overflow button
overflowState = $tabo.hasClass("noContent");
$tabo.addClass("noContent");
})
.on("panelbeforeclose", function() {
//Put the overflow button into the correct state
if(!overflowState) {
$tabo.removeClass("noContent");
}
});
//Handle overflow menu clicks
$(".bb10-panel").bind("vclick", function() {
//Close the panel
$(this).panel("close");
});
$("#left li").bind("vclick", function() {
//Clear the active state from any other buttons that may have been set to active
$(this).siblings().removeClass("ui-btn-active");
//Add the active state to the selected button
$(this).addClass("ui-btn-active");
//Clear the contents of the tab overflow button
//Add class to put the tab overflow icon in the correct position
//Clear the active state from all tab buttons in action bar
$('[data-role="tab"], [data-role="tab-overflow"]').removeClass("active");
});
$(".inBar").bind("vclick", function() {
//Set the active state to the tab in the actionbar
$('#' + this.id.slice(0, 2)).addClass("active");
$tabo.addClass("noContent").empty();
overflowState = true;
});
$(".notInBar").bind("vclick", function() {
//Set the active state to the tab overflow button
$tabo.empty()
.addClass("active")
.html('<img src="img/generic_81_81_placeholder.png" alt=""><p>' + $(this).text() + '</p>')
.removeClass("noContent");
overflowState = false;
});
$("[data-role='tab']").bind("vclick", function() {
//Change page on tab click
if($(this).data("href")) {
$.mobile.changePage( $(this).data("href"), { transition: "slideup"} );
}
});
}
App.page.applicationMenu.init = function() {
if(typeof blackberry != 'undefined'){
blackberry.event.addEventListener('swipedown', function(){
$('#top').panel("open");
});
$('#menuBtn').css('display','none');
}
else{
$('#simulInst').css('display','none');
}
}
App.init();
Is App an object specific to Blackberry? I did some dabbling and made a small app but didn't use App or init anything.

App in this example is defined at the top:
App = {};
So it's just a new plain old JavaScript object (dictionary), which they then define functions and data to it e.g. App.utils = ....
You can try it out on a browser, press F12 and then go to the console (ESC) and type e.g. blah = {} and you will see a new object created with the name blah. Everything is an object in JavaScript apparently.
Read more
http://www.w3schools.com/js/js_objects.asp

Profiling jQuery, how do I make my app more snappy?

I have some calls to jQuery functions like 14,000 times... what the hell? I don't have that many functions, really just simple stuff like appending and removing DOM elements, why do some of my event handlers call functions so many times?
Plus to compound my issues, Firebug's profiler just show's the min'd functions names... and even when I use the uncompressed library it mostly just shows init() or $.()
Does anyone have any tricks?
So I know this is a lot, but it seems really inefficient, it executes on our page newgoldleaf.com, some of the functions take almost 50ms to run... is that a long time or is it just me?
// prepare ajax for form posts
jQuery.ajaxSetup({
"beforeSend" : function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})
// initializes panels and gets url hash, shows correct panel
jQuery.fn.initPanes = function() {
$("div#main_content > div:not(.message)").addClass("inactive");
var hash = window.location.hash.substr(1);
this.each(function () {
if ($(this).hasClass(hash)) {
var panelToShow = "." + $(this).attr("class");
$(panelToShow).removeClass("inactive").toggleClass("active");
}
});
// if no hash found in url, activate first menu item
if (hash == "" ) {
$(this).eq(0).activatePane();
}
};
// shows panel when user clicks sidebar links
jQuery.fn.activatePane = function(pane) {
if ($(this).hasClass("unavailable") == true) {
return false;
}
if ($(this).hasClass("active") == false) {
$("div#main_content > div:not(.message)").hide().removeClass("active").addClass("inactive");
$(this).siblings().removeClass("active");
var panelToShow = "div#main_content div." + $(this).attr("class");
// set the hash in the url
window.location.hash = $(this).attr("class");
$(this).toggleClass("active");
$(panelToShow).fadeIn("slow").removeClass("inactive").addClass("active");
};
};
jQuery.fn.functionName = function() {
};
$(document).ready(function (){
$('ul.examples li:not(img, h5, a)').hover(function (){
var bubble = $(this).find("h5.bubble")
bubble.animate({
opacity:".99",
bottom:"28px"
}, 200);
}, function (){
var bubble = $(this).find("h5.bubble")
bubble.animate({
opacity:"0",
bottom:"38px"
}, 200).animate({
bottom:"20px"
}, 0);
});
// hide/show comment form for users with javascript
$("div#comments_not_allowed").hide();
$("form#new_comment").show();
// $("body#index div.preview").slideShow();
// error and flash notice animation
$(".message").animate({
opacity: "1",
}, 2000).animate({
opacity: "0",
}, 2000).hide(500);
// home page caption bubble for blog image fade in
$("body#index h5.bubble").fadeIn("slow");
$("body#index h5.bubble").animate({
bottom: "22px",
opacity: ".99"
}, 1000);
$("form#new_comment").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null, "script");
return false;
});
$("form#new_lead").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null, "script");
return false;
});
if ($("ul.panels").length > 0 ) {
// panel animation
$("div#aside ul li").initPanes();
$("div#aside ul li").css({
cursor:"pointer"
});
$("div#aside ul li").click(function () {
$(this).activatePane();
});
};
$(document).load(function() {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
function startAnalytics() {
var pageTracker = _gat._getTracker("UA-7434953-1");
pageTracker._initData();
pageTracker._trackPageview();
}
if (window.addEventListener) {
window.addEventListener('load', startAnalytics, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', startAnalytics);
}
})
})

Develop Reference

JavaScript is the programming language of the Web.

div does not react under circumstances - javascript

Related

Javascript - How to load content depends on url

Accordion open when page loads

Javascript / Jquery file combination

What does this BlackBerry Web App Javascript code do?

Profiling jQuery, how do I make my app more snappy?

Categories

Resources