Hallo,
ich bin mir nicht sicher ob ich die Funktion .smartresize() innerhalb einer if-abfrage oder die if-abfrage innerhalb von .smartresize() aufrufen muss.
Weil ich hab etwas Probleme damit das dieses gutterWidth irgendwie falsch berechnet wird. ich hab das Gefühl das .smartresize() nicht ausgeführt wird.
Über die media-Queries füge ich hinter dem body einen Größennamen ein auf die mit der var size geprüft wird.
Viele Grüße
ich bin mir nicht sicher ob ich die Funktion .smartresize() innerhalb einer if-abfrage oder die if-abfrage innerhalb von .smartresize() aufrufen muss.
Javascript:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
// Isotope Plugin
//isotope screen-lg-desktop
if (size == 'screen-lg-desktop') {
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 110
},
resizable: true
});
$(window).smartresize(function(){
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 110
},
resizable: true
});
});
}
//isotope screen-desktop
else if (size == 'screen-desktop') {
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 50
},
resizable: true
});
$(window).smartresize(function(){
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 50
},
resizable: true
});
});
}
//isotope screen-tablet
else if (size == 'screen-tablet') {
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 50
},
resizable: true
});
$(window).smartresize(function(){
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 50
},
resizable: true
});
});
}
//isotope screen-phone
else if (size == 'screen-phone') {
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 110
},
resizable: true
});
$(window).smartresize(function(){
container.isotope({
itemSelector : '.tiles',
layoutMode: 'masonry',
masonry: {
gutterWidth: 110
},
resizable: true
});
});
}
});
Über die media-Queries füge ich hinter dem body einen Größennamen ein auf die mit der var size geprüft wird.
CSS:
body:after {
content: 'screen-lg-desktop';
display: none;
}
Viele Grüße