Difference between revisions of "HQ:2021"

Line 1,910: Line 1,910:
 
var tot_siblings = $('#'+clicked_carrousel+'> .controls> .button.current').parent().children().length;
 
var tot_siblings = $('#'+clicked_carrousel+'> .controls> .button.current').parent().children().length;
 
var left_siblings = $('#'+clicked_carrousel+'> .controls > .button.current').nextAll().length;
 
var left_siblings = $('#'+clicked_carrousel+'> .controls > .button.current').nextAll().length;
 +
var pos = tot_siblings - left_siblings;
 
 
−
console.log( "tot= "+tot_siblings+"left="+left_siblings);
+
console.log( "tot= "+tot_siblings+" left="+left_siblings);
 
 
 
//remove previous selection
 
//remove previous selection
Line 1,920: Line 1,921:
 
//this becomes selection
 
//this becomes selection
 
$(this).addClass('current');
 
$(this).addClass('current');
−
+
$('#'+clicked_carrousel+'> .content > .slide:eq('+pos+')').addClass('current');
 
 
−
 
−
 
−
 
−
 
 
 
 
//if this carrosuel id is in the rotation arrays, remove it  
 
//if this carrosuel id is in the rotation arrays, remove it  
Line 1,937: Line 1,934:
 
});
 
});
 
 
 +
 +
//variable to hold the class specifications for slides + buttons
 +
var slide='';
 +
var button=''
 
 
 
//for each carrousel in the page
 
//for each carrousel in the page
 
//change images every 3.5 seconds
 
//change images every 3.5 seconds
 +
 
window.setInterval(function(){
 
window.setInterval(function(){
 
 
 
for( y=0; y < carrousel_ids.length; y++ ){
 
for( y=0; y < carrousel_ids.length; y++ ){
 +
 +
//specific ids > classes
 +
slide = '#'+carrousel_ids[y]+'> .content > .slide';
 +
button = '#'+carrousel_ids[y]+'> .controls> .button';
 
 
 
//check if there is another sibling next
 
//check if there is another sibling next
−
if( $('#'+carrousel_ids[y]+'> .content > .slide.current').next().length > 0  ){
+
if( $(slide+'.current').next().length > 0  ){
−
$('#'+carrousel_ids[y]+'> .content > .slide.current').next().addClass('carrousel_temp');
+
$(slide+'.current').next().addClass('carrousel_temp');
−
$('#'+carrousel_ids[y]+'> .controls> .button.current').next().addClass('carrousel_temp');
+
$(button+'.current').next().addClass('carrousel_temp');
 
}
 
}
 
 
 
//if not, setup for next round to start at the beginning of the carrousel
 
//if not, setup for next round to start at the beginning of the carrousel
 
else{
 
else{
−
$('#'+carrousel_ids[y]+' > .content > .slide' ).first().addClass('carrousel_temp');
+
$(slide).first().addClass('carrousel_temp');
−
$('#'+carrousel_ids[y]+' > .controls > .button').first().addClass('carrousel_temp');
+
$(button).first().addClass('carrousel_temp');
 
}
 
}
 
 
 
//for current slide, remove current status so its not displayed anymore
 
//for current slide, remove current status so its not displayed anymore
−
$('#'+carrousel_ids[y]+' > .content > .slide.current').removeClass('current');
+
$((slide+'.current').removeClass('current');
−
$('#'+carrousel_ids[y]+'> .controls > .button.current').removeClass('current');
+
$(button+'.current').removeClass('current');
 
 
 
//for next slide, add current status so it can be seen now
 
//for next slide, add current status so it can be seen now
−
$('#'+carrousel_ids[y]+'> .content > .slide.carrousel_temp').removeClass('carrousel_temp').addClass('current');
+
$(slide+'.carrousel_temp').removeClass('carrousel_temp').addClass('current');
−
$('#'+carrousel_ids[y]+' > .controls > .button.carrousel_temp').removeClass('carrousel_temp').addClass('current');
+
$(button+'.carrousel_temp').removeClass('carrousel_temp').addClass('current');
 
 
 
}
 
}

Revision as of 17:35, 7 January 2021

GIANT JAMBOREE
COMPETITION
Competition 1
Competition 1
Competition 2
Sub Competition 2.1
Sub Competition 2.2
Competition 3
Sub Competition 3.1
Sub Competition 3.2
1
2
3
1
2
3
4
1
2

COLUMNS : LAYOUT CLASSES

H1 > Column Full size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H2 > Column Half size

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H2 > Column Half size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H5 > Column Three Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H5 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H6 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H6 > Column Two Third size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BUTTON / DEFAULT
BUTTON LIGHT
BUTTON DARK
BUTTON ORANGE
BUTTON PURPLE
BUTTON WINE
BUTTON CORAL
BUTTON TEAL
BUTTON LIGHT GREEN
BUTTON DARK GREEN
BUTTON YELLOW

DECORATION: HIGHLIGHTS

Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SAME HEIGHT BOXES: ROW

Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Two third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Three quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HIGHLIGHT POSTS

Title of the post with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event

Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Three Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

LIGHT THEME

H1 > Column Full size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

DECORATION: HIGHLIGHTS

Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HIGHLIGHT POSTS

Title of the post with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event

Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

>

DARK THEME

H1 > Column Full size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

DECORATION: HIGHLIGHTS

Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HIGHLIGHT POSTS

Title of the post with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event

Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

>