javascript,css,time , Changing div style for every day of the week script


Changing div style for every day of the week script

Question:

Tag: javascript,css,time

This is my project: http://jsfiddle.net/yL0o1cy0/

.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>
    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thusday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>
    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thusday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
  </div>
</div>

What I want is that on Monday, the Monday box changes color from background-color: #49CEFF; to background-color: #242424;, and the same on Thursday for the Thursday box and so on for the other days.

I know how to change change something every 24h(for example), but I really don't know what to do in this situation.


Answer:

One approach is:

function colorToday(color) {

    // get all the <p> elements contained within <div> elements
    // with the class-name of 'dayname', using
    // document.querySelectorAll(); converting the NodeList
    // into an Array, using Functionn.prototype.call() to use
    // Array.prototype.slice():
    var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),

        // JavaScript's days of the week start with Sunday (0), here
        // we create an Array of the days of the week:
        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

        // getting the current day of the week (this returns a number
        // from 0 (Sunday) to 6 (Saturday):
        day = new Date().getDay();

    // iterating over the array we created earlier,
    // using Array.prototype.forEach():
    dayContainers.forEach(function (d) {
    // 'd' is the current array-element, here it's a DOM node
    // the <p> elements found above.

        // if the current <p> has text-content equal to
        // the day of the week found from the array:
        if (d.textContent.trim() === days[day]) {

            // we set the background-color of the <p> element's
            // parent to the colour supplied by the user:
            d.parentNode.style.backgroundColor = color;
        }
    });
}

// calling the function, setting the color:
colorToday('#242424');

function colorToday(color) {
  var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    day = new Date().getDay();

  dayContainers.forEach(function(d, i) {
    if (d.textContent.trim() === days[day]) {
      d.parentNode.style.backgroundColor = color;
    }
  });
}

colorToday('#242424');
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
</div>

External JS Fiddle demo, for experimentation/development.

Similarly, rather than explicitly setting a backgroundColor with the JavaScript, you could instead add a today class-name to the wrapper element:

function colorToday(color) {
    var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        day = new Date().getDay();

    dayContainers.forEach(function (d, i) {
        if (d.textContent.trim() === days[day]) {

            // adding the 'today' class-name to the parent
            // of the <p> whose text-content is equal to
            // the current day:
            d.parentNode.classList.add('today');
        }
    });
}

colorToday();

function colorToday(color) {
  var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    day = new Date().getDay();

  dayContainers.forEach(function(d, i) {
    if (d.textContent.trim() === days[day]) {
      d.parentNode.classList.add('today');
    }
  });
}

colorToday();
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
.today {
  background-color: #242424;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
</div>

External JS Fiddle demo, for experimentation/development.

References:


Related:


show div only when printing


javascript,html,css
Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

slideToggle state not working with multiple boxes


javascript,jquery,cookies
I'm trying to save the toggle state of collapsable boxes using cookies. Here's my code: HTML: <div class="box_container"> <div class="box_handle"> Title </div> <div class="box" data-title="admin_actions"> Content </div> </div> Javascript: $('div.box_container div.box_handle').click(function() { $(this).next('.box').slideToggle('fast'); }); $.each($('div.box_container div.box_handle'), function(index,value){ if ($.cookie('show_box_' + $(value).next('.box').attr('data-title')) != 'closed'){...

How to use a service with Http request in Angular JS


javascript,angularjs
I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

Javascript change the souce of all images present inside a string


javascript,jquery
I have a message or string which contain both text as well as images as below. var text = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif"> <img src="path../files/stickers/416397278.gif" title=":happy"></span>'; Before appending this to the the chat div i want to replace the src of the images to a default image. How can...

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin


javascript,gruntjs,jslint,beautify
I have a problem while building the sources using Grunt, with JSLint task for error check: L177: Expected a newline at the end of the file. Warning: Formatting check failed. Use --force to continue. Aborted due to warnings. The problem is obvious, but I use also the Beautify plugin for...

Detect when the jQuery UI slider is being moved?


jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


html,css,css3
I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

Teechart HTML5, line color and thickness


javascript,html5,teechart
How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

Sockets make no sense?


javascript,node.js,sockets
I'm using the 'ws' library for Node.js. I can write code that sends data from my server to my client, posting a date and time update, and closes the socket when I click a button; var wss = new WebSocketServer({server: server}); console.log("WebSocket server created"); wss.on('connection', function(socket) { // SEND DATE...

Javascript: Forloop Difference between i++ and (i+1)


javascript,loops,for-loop
I was building a javascript for loop and I want to compare the value of an array to the next value in the array. If both values are not equal, I want to return true, otherwise I want to return false. In the code below I pass the string "aba",...

tag in HAML


html,css,haml
How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

How to find the days b/w two long date values


javascript,jquery,date
I have two long dates value. For Ex: 1433097000000 1434479400000 Here i have to find the days between these two by jquery For Ex: 15/06/2015 - 22/06/2015 If it is more than 5 days, I want to get from is 15/06/2016, to is 19/06/2015. It is based on long values...

How To Check Value Of String


javascript,css,string,numeric
<span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Target next instance of an element/div


javascript,jquery,html
I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

Google map infowindow position


javascript,google-maps,events,infowindow
Here is a sample google map with three polygons. I am setting the infowindow for each polygon as, for (var i in coordinates) { arr = []; for (var j=0; j < coordinates[i].length; j++) { arr.push( new google.maps.LatLng( parseFloat(coordinates[i][j][0]), parseFloat(coordinates[i][j][1]) )); bounds.extend(arr[arr.length-1]) } // Construct the polygon. polygons.push(new google.maps.Polygon({ paths:...

Angular $http and Fusion Tables in IE9


javascript,angularjs,internet-explorer-9,google-fusion-tables
I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

Parsing XML array using Jquery


javascript,jquery,xml,jquery-mobile
I have stuck up with an issue of passing XML using Jquery. I am getting empty array while traversing to jquery.Please help me how to get datas from XML array. I have mentioned my code below. XML <?xml version="1.0" encoding="UTF-8"?> <json> <json> <CustomerName>999GIZA MID INSURANCEAND SERVICES PVT LTD</CustomerName> <mobiLastReceiptDate>null</mobiLastReceiptDate> </json>...

Changing font-size of
  • on wordpress

  • css,wordpress,html-lists
    I am adding some pages on a wordpress themed website. There is a table with 3 columns: 1st column will be the title (larger font). Since it looks better and editing is easier, I started using <ul> instead of <td> Even though it works fine on JSFIDDLE font-size on the...

    Can't call fetch directly in Backbone model listenTo


    javascript,backbone.js,coffeescript
    I'm trying to have a model listen to a collection and fetch itself when the collection changes: class Team extends Backbone.Model urlRoot: '/team', initialize: function(attributes, options) { this.listenTo(members, 'change', this.fetch) The fetch does seem to trigger, but the url is all messed up, and to get it to work I...

    Cant submit form


    javascript,php
    Basically I've got a form with 5 radio buttons. No submit button. I want the form to run when the user clicks on any of the radio buttons, so this is what I did. <input id="5" type="radio" name="star" onchange="this.form.submit();" <?php if ($row["star"] =="5") echo "checked";?> value="5"/> a querystring is required...

    How to make background body overlay when use twitter-bootstrap popover?


    html,css,twitter-bootstrap
    Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

    Login Signup PopUp


    javascript
    When I Open Login and signUp Portal it open with the both tab contents and then when I click on Login tab it open login tab content and on click register tab it open register tab page. But again after refresh the page popup showing both tabs content together![enter image...

    Replacing elements in an HTML file with JSON objects


    javascript,json,replace
    I am writing some Javascript to: Read in and Parse a JSON file Read in an HTML file (created as a template file) Replace elements in the HTML file with elements from the JSON file. It is only replacing the first element obj.verb. Can someone please help me figure out...

    Onclick add html content and remove it by clicking “delete” link


    javascript,jquery
    I have some issue, help me please to find where is the mistake. $(document).ready(function(){ $(function() { var scntDiv = $('#p_scents'); var i = $('#p_scents .row-wrap').size() + 1; $('body').on('click', '.add-item', function() { $('<div class="row-wrap cf"><div class="col-md-3 col-sm-3 col-xs-12"><input type="text" placeholder="Наименование" name="item_name' + i +'"></div><div class="col-md-2 col-sm-2 col-xs-12"><input type="text" placeholder="Количество" name="item_count' +...

    How to remove all the borders of a selectbox?


    jquery,html,css,drop-down-menu
    How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

    Top header 100% of screen, but body only 70%?


    html,css
    Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

    Get elements containing text from array


    javascript,jquery,html,arrays,contains
    I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

    Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG


    javascript,angularjs,restangular
    I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

    why i don't get return value javascript


    javascript,jquery,html,json,html5
    When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

    Not able to access variables in required file


    javascript,gulp,require,browserify
    I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

    submitting form then showing loading image by javascript


    javascript,html
    I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

    Get all prices with $ from string into an array in Javascript


    javascript,regex,currency
    var string = 'Our Prices are $355.00 and $550, down form $999.00'; How can I get those 3 prices into an array?...

    Automatically calling server side class without


    javascript,html,ajax
    I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

    Substring of a file


    javascript,arrays,substring
    I have a file that is structure like this : var file = "a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d"; Now I would extract all letters "c" and "d" of this file and put those letter in array, structure like this: var array = [ [a,b,1], [a,b,2], [a,b,3], [a,b,4], [a,b,5] ]; How...

    Click on link next link should be display on same page


    javascript,php,jquery,html,css3
    I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

    Javascript function to validate contents of an array


    javascript,arrays
    Here's what is asked: validItems(items) – this function receives a string array of items which are to be for a customer. The function returns an empty string indicating all item codes in the array are valid; otherwise the function returns the first invalid item code in the array. All item...

    Javascript sort array of objects in reverse chronological order


    javascript,arrays,sorting
    I have an array of objects which holds a list of jobs and I would like to sort them in reverse chronological order as they would appear on a resume for example. I came up with the below solution which 'seems' to work but I was wondering if there is...

    Dynamically resize side-by-side images with different dimensions to the same height


    javascript,html,css,image
    I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

    Saving data using promises


    javascript,parse.com,promise
    On Parse.com I have the following function, and my question follows: function myFunction(array, value) { var logMessage; logMessage = "array: " + array.length.toString(); console.log(logMessage); if (!array.length) return; if (!value) value = Math.min(10, array.length); if (array[array.length - 1].get("advertisePointNumber") >= value) return; var classPromise; array[array.length - 1].set("advertisePointNumber", value); logMessage = "(BIS)array: "...

    change css dynamically by selecting dropdown list item


    jquery,html,css,drop-down-menu
    I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

    Converting “i+=n” for-loop to $.each


    javascript,jquery
    I have the below html structure: <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> Now to group/wrap each 4 items in a separate div I did as below: var div=$('.thumbnail'); for(var i = 0; i < div.length; i+=4) { div.slice(i, i+4).wrapAll("<div...

    How to get my node.js mocha test running?


    javascript,node.js,mocha,supertest
    I have developed a service in node.js and looking to create my first ever mocha test for this in a seperate file test.js, so I can run the test like this: mocha test I could not figure out how to get the reference to my app, routes.js: var _ =...

    Javscript Replace Text in tags without changing children element HTML and Content


    javascript,jquery
    I have a script where I'd like to replace the text anywhere in the body visible to the user like so: $("body").html($("body").html().replace(/replaced word/g,'HELLO')); This works but it works to well. Whenever "replaced word" is within a tag, like a href, or span, or div, or anything it throws off all...

    Website showing differently in windows xp and mobile


    html,css
    I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

    want to show and hide text using “this” jquery


    javascript,jquery
    I want to achieve this effect with this because I have several paragraphs like this so I don't wanna use id for each paragraph <p class="desc_services_subheading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,...

    session value in javascript cannot be set


    javascript,function,session
    I am quite new to javascript, I wonder why my session value in javascript wont be set to 1 even I tried. When call this function again, the value of the session will change again. My javascript code as below. <script type="text/javascript"> function Confirm() { alert(<%=Session["Once"]%> != 1); var value...