Buonasera,
sto realizzando un sito responsive e diciamo che per ora tutto bene anche se sono alle prime armi. Il problema è nato quando ho deciso di inserire la galleria tramite il plugin Photoswipe. Come dalla guida ho seguito l esempio per integrarlo tramite jquery ed ecco il problema se creo una nuova pagina vuota e inserisco il codice tutto funziona mentre inserito nella pagina del sito nel (div nascosto) dove ci sono integrate le seguenti librerie:
- respond.min.js
- modernizr-2.0.6.min.js
- jquery.min.js
- jquery.fitvids.js
- lo script per il menu
codice:
<script type="text/javascript">
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
breakpoint: 1011,
sticky: false
}, options);
return this.each(function() {
cssmenu.find('li ul').parent().addClass('has-sub');
if (settings.format != 'select') {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
}
else if (settings.format === 'select')
{
cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
var selectList = cssmenu.find('select');
selectList.append('<option>' + settings.title + '</option>', {
"selected": "selected",
"value": ""});
cssmenu.find('a').each(function() {
var element = $(this), indentation = "";
for (i = 1; i < element.parents('ul').length; i++)
{
indentation += '-';
}
selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
});
selectList.on('change', function() {
window.location = $(this).find("option:selected").val();
});
}
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > settings.breakpoint) {
cssmenu.find('ul').show();
cssmenu.removeClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').hide();
}
else {
cssmenu.find("#menu-button").removeClass("menu-opened");
}
}
if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
cssmenu.find('ul').hide().removeClass('open');
cssmenu.addClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').show();
}
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "dropdown"
});
});
});
})(jQuery);
ed inoltre il seguente script che al click suogni pulsante mostra un div
codice:
$(document).ready(function(){
$("#audio_nascosto").hide();
$("#video_nascosto").hide();
$("#immagini_nascosto").hide();
$("#mostra_audio").click(function(){
$("#audio_nascosto").slideToggle("slow");
});
$("#mostra_video").click(function(){
$("#video_nascosto").slideToggle("slow");
});
$("#mostra_immagini").click(function(){
$("#immagini_nascosto").slideToggle("slow");
});
});
$(".video_nascosto").fitVids();
</script>
ECCO IL PROBLEMA
il MENU non mostra il pulsante ma si comporta sempre come barra. A questo punto mi chiedo i vari script sono incompatibili?
Spero di essermi spiegato