load correct day of the week inside accordion gallery

Question

enter image description here i've designed an accordion gallery displaying different images - and it follows the structure of days of the week

What i am trying to achieve is for gallery to load the correct tab (day of the week) as soon as the user loads page. i.e today is wednesday - wednesday tab will be opened. At the moment the javascript i do have only loads the first img from the 'li' which happens to be Monday. I am very new to javascript - my skills are very limited with JS.

This is my HTML

 <div class="contentDiv">
            <ul id="DOTD">
                <li>
                    <img src="images/1NewBC/DOTD/Monday.gif">
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Tuesday.gif">                      
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Wednesday.gif">                        
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Thursday.gif">                     
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Friday.gif">                       
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/DOTW.gif">
                </li>
                <li>
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                </li>
            </ul>
        </div>

Here is my JavaScript - really basic - all it does is loads first img fromt the list and created a click event so user can manualy click through the tabs

<script>
    $(document).ready(function(){      
        activeItem = $("#DOTD li:first");     
        $(activeItem).addClass('active');       

        $("#DOTD li").click(function(){         
            $(activeItem).animate({width: "28px"}, {duration:300, queue:false});         
            $(this).animate({width: "741px"}, {duration:300, queue:false});         
            activeItem = this;     
        });
    });
    </script>

and this is my css for accordion gallery

/* Deal of the Day Coding */
/* DoTD Background */
#content .contentDiv #DOTD{
list-style: none;
overflow: hidden;
background: rgb(36,73,148);
display: inline-block;
margin-left: 0px;
margin-bottom: -10px;
}

/* DotD list and text color */  
#DOTD li{
float: left;
border: 4px solid rgb(255,255,255);
display: block;
height: 120px;
width: 28px;
overflow: hidden;
color: white;
font-size: 16px;
line-height: 1.5em;
}

#DOTD li img{
border: none;
float: left;
}
#DOTD li:hover{
border: 4px ridge black;
}

#DOTD li.active{
width: 741px;
}

Any help would be much apreccieated!! I am so new to JavaScript that i dont even know where to start

score 1 · Accepted Answer · answered Jan 14 '15 at 11:58

1

Assuming what your Javascript look like, you are using jQuery, here's a sample code based on of your actual javascript code

$(document).ready(function(){

activeItem = $("#DOTD li:first");     
$(activeItem).addClass('active');  



    $("#DOTD li").click(function(){         
        $(activeItem).animate({width: "28px"}, {duration:300, queue:false});         
        $(this).animate({width: "741px"}, {duration:300, queue:false});         
        activeItem = this;     
    });

    var d = new Date();
    var n = d.getDay();
    $("li").eq(n-1).trigger("click");
});

Solution and more informations found here for getting the day of week, and here to trigger the click function

answered Jan 14 '15 at 11:58

Jaay

2,103
1
16
34

briliant thank you. That new bit of code you've added at the end sorted it right out for me. just a quick question what does this $("li").eq(n-1).trigger("click"); do? – Galimbek Sagidenov Jan 14 '15 at 12:34
`$("li").eq(n)` will select the nth li element, here the first li is monday, second tuesday and so on. There is a llittle problem in the solution I propose however d.getDay() is a value from 0 to 6 ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday") (that's why I use -1 in the `eq` function,. Sidenote `eq(-1)` will select the last `li` element, in other word, on Sunday the tab containing "BlankBlank" will be shown. `trigger("click")` will simulate a click action on the specified element. – Jaay Jan 14 '15 at 12:39
Selecting last tab on sunday is perfect as it will contain all the information contained in other tabs through out the week in that last tab, so makes perfect sense for it to load on Sunday. Off topic - is there a way to put a delay on "a href="link" target="_blank" so the user sees the new tab open, before it loads a original picture in a new window? – Galimbek Sagidenov Jan 14 '15 at 12:45

score 0 · Answer 2 · answered Jan 14 '15 at 12:05

You can try this i just added this day only you can do other days too by writing a condition you can also set the p content to display:none if you don't want it there and it will still work Fiddle p content set to display:none Fiddle

$(document).ready(function () {
    if ($('p:contains("Wednesday")')) {
        activeItem = $(".wed");
        $(activeItem).addClass('active');

    }

    $("#DOTD li").click(function () {
        $(activeItem).animate({
            width: "28px"
        }, {
            duration: 300,
            queue: false
        });
        $(this).animate({
            width: "741px"
        }, {
            duration: 300,
            queue: false
        });
        activeItem = this;
    });
    });

var date = new Date();
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var weekday = weekdays[date.getDay()];
$('p').text(weekday);

#content .contentDiv #DOTD {
    list-style: none;
    overflow: hidden;
    background: rgb(36, 73, 148);
    display: inline-block;
    margin-left: 0px;
    margin-bottom: -10px;
}
/* DotD list and text color */
 #DOTD li {
    float: left;
    border: 4px solid rgb(255, 255, 255);
    display: block;
    height: 120px;
    width: 28px;
    overflow: hidden;
    color: white;
    font-size: 16px;
    line-height: 1.5em;
}
#DOTD li img {
    border: none;
    float: left;
}
#DOTD li:hover {
    border: 4px ridge black;
}
#DOTD li.active {
    width: 741px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p></p>
<div class="contentDiv">
    <ul id="DOTD">
        <li>
            <img src="http://placekitten.com/300/301">
        </li>
        <li>
            <img src="http://placekitten.com/300/302">
        </li>
        <li class="wed">
            <img src="http://placekitten.com/300/303">
        </li>
        <li>
            <img src="http://placekitten.com/300/304">
        </li>
        <li>
            <img src="images/1NewBC/DOTD/Friday.gif">
        </li>
        <li>
            <img src="http://placekitten.com/300/306">
        </li>
        <li>Blank Blank Blank Blank Blank Blank Blank Blank Blank Blank</li>
    </ul>
</div>

load correct day of the week inside accordion gallery

2 Answers2

Linked