Jump to content

newcoder1010

Members
  • Content Count

    403
  • Joined

  • Last visited

Community Reputation

3 Neutral

About newcoder1010

  • Rank
    Member

Recent Profile Visitors

23,689 profile views
  1. Hello, I have the following css for anchor selectors. Everything works except for the visited links. When a visitor already on a page(i.e. news page), I like the "news" link to be colored yellow (visited anchor) which is not working. Please advise. /* unvisited link */ .navbar-nav > li > a:link{ color: white ; } .path-frontpage .navbar-nav > li > a:link{ color: #24678d ; } /* visited link */ .navbar-nav > li > a:visited, .path-frontpage .navbar-nav > li > a:visited{ color: yellow ; border: 1px solid #24678d; padding: 5px 15px 5px 15px; } /* mouse over link */ .navbar-nav > li > a:hover, .path-frontpage .navbar-nav > li > a:hover{ color: red; background:white; } /* selected link */ .navbar-nav > li > a:active, .path-frontpage .navbar-nav > li > a:active{ color: green ; }
  2. .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; max-height: 550px; width: 100%; } Now it is better than before. But the problem is that as I am screen sizes are decreasing, the images do not look good because it is trying to fit image on smaller screen with the same height. How can I fix it? Thanks!
  3. Hello, <div id="carousel-block-generic" class="carousel slide" data-ride="carousel" data-wrap="true" data-interval="4000" data-pause="hover"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-block-generic" data-slide-to="0" class="indicator-item"> </li> <li data-target="#carousel-block-generic" data-slide-to="1" class="indicator-item"> </li> <li data-target="#carousel-block-generic" data-slide-to="2" class="indicator-item active"> </li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item item"> <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building.jpg" class="carousel-image img-fluid" alt="" title=""> <div class="carousel-caption"> <h3> title 1 </h3> <p> caption 1 </p> </div> </div> <div class="carousel-item item"> <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building_0.jpg" class="carousel-image img-fluid" alt="" title=""> <div class="carousel-caption"> <h3> title 1 </h3> <p> caption 2 </p> </div> </div> <div class="carousel-item item active"> <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building_1.jpg" class="carousel-image img-fluid" alt="" title=""> <div class="carousel-caption"> <h3> title </h3> <p> caption 2 </p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control carousel-control-prev" href="#carousel-block-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left carousel-control-prev-icon"></span> </a> <a class="right carousel-control carousel-control-next" href="#carousel-block-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right carousel-control-next-icon"></span> </a> </div> Default CSS on image: .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; } Original images heights are 575px and 700px width. I just wanted to make the images width 100%. Once I apply css as width:100%, images height become more than the original heights. .carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; width: 100% } How can I make the images 100% width by keeping the original heights? Thanks!
  4. I am not able to follow you. Div class fixed element will be business logo eventually. I am just trying to put the fixed div class on top of the slideshow so slideshow will be below the div class. I also tried .fixed {position:absolute;} and it did not work. Can you please help me with some code?
  5. <div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="fixed"> one</div> <!-- Indicators --> <ol class="carousel-indicators"> <div class="fixed1"> two</div> Style .fixed1 { color: red; top: 0; left:0; } I like to place fixed1 or fixed div element at the top left of the slideshow. My plan is to put logo there. Currently, fixed1 div displays at the bottom of the show. Fixed div shows on top outside the show. Please advise.
  6. Hello, I have this slideshow. I like to have a div element attached in the slideshow. I do not want the element to slide. How can I keep the element fixed without sliding? Please see this line inside the carousel block. This is the element I like it to be fixed on top of the slideshow. Currently, it shows on the top of the slideshow. <div class="fixed"> jjjjjjjjjjjjjjjjjjkjjjjjjjjj</div> <div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="fixed"> jjjjjjjjjjjjjjjjjjkjjjjjjjjj</div> <div class="item active"> <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>LA is always so much fun!</p> </div> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> Thanks!
  7. Hello, I have a paragraph needs to have Dark Green STENCIL FONT. I have been looking all over but could not find any styling for this. I also do not know it supposed to look like. Can you please recommend a font style for Dark Green STENCIL FONT? Thanks!
  8. Hello, I have FAQ section where questions and answers are collapsible and expandable. I have this css to put an up and down error next to question. I can see the arrow just fine on laptop. I also see it when I inspect in chrome. But when I see it in mobile phone, arrow gets changed to square or different look. If I change the font-family, I do not see arrow any more. Instead, I see different icons depending on the font family. So how can I fix the css so it will show up and down arrow in each device? .accordion-section .panel-default .panel-title a:after { font-family: 'FontAwesome'; font-style: normal; font-size: 3rem; content: "\f106"; color: #1f7de2; float: right; margin-top: -12px; } Thanks!
  9. Hello, Thank you again for the code. I learned a lot from it. However, I got another code that is closer to my requirements as my requirements have changed quite a bit. Please kindly look at the requirements. 1. Cash reward should be 5% of the cash value. 2. Min cash reward should be 250. and Max cash reward would be 6000. 3. It requires fast increment. Max number should be displayed in less than 5 seconds. As soon as people start typing, it should increment to min amount of $250. 4. Calculation should always start from the previously calculated cash reward amount. It should increment and decrement. You can decide what number it should increment or decrement by. If cash reward is less than the calculated reward, it should decrement. If cash reward is more than the calculated reward, then it should increment from the cash reward amount. In other words, it should not always calculate from 0. 5. Cash reward amount should display in this $11,111 format. I spent good two days already. I kind of did requirements 1, 2, and 3. I just modified the existing code by adding variables and if-else statements. Even if code are not good enough, at least 1,2, and 3 work for me. I am not sure how to do requirement no 4. If you could help me with the code, it will be very good. <p><input id="source" placeholder="Sale Price" type="text" /></p> <p>= $<span id="result">0</span></p> <script> document.addEventListener('DOMContentLoaded', function(e) { const persent = 5; const delay = 0; const max = 6000; const min = 250; let tempRes2 = 2; let tempRes = 0; const source = document.querySelector('#source'); const result = document.querySelector('#result'); window.timerId; function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } const typeHandler = function(e) { if (typeof window.timerId !== 'undefined') { clearInterval(window.timerId); } let value = e.target.value; if (!isNumber(value)) { result.innerHTML = 0; return; } const persentage = Math.round(value*persent/100); dividePer = Math.round(persentage /2); let i = 0; window.timerId = setTimeout(function drawDigit() { if (i < persentage) { tempRes = ++i; if (persentage < min) { result.innerHTML = min; }else if (persentage > max ){ window.timerId = setTimeout(drawDigit, delay); result.innerHTML = max ; } else { window.timerId = setTimeout(drawDigit, delay); tempRes2 = i*7+110; if (tempRes2 < persentage) { result.innerHTML = tempRes2; } else { result.innerHTML = persentage; } } } }, delay); } source.addEventListener('input', typeHandler); }); </script> Thanks!
  10. This is awesome. Thanks as always. I will explore this and will get back to you if I have any questions.
  11. I have been searching all over but could not find a thing specific. Can you help me with some code?
  12. Hello, I am very new to javascript and jquery. I like to have a text field where I can enter a dollar value and then system should generate 10% and display the number as it is calculating on my website. I am not sure how to do that and what language to use. Sample is on this page Cash reward section. Thank you!
  13. Thank you! I will play with that tonight.
  14. Thanks for your reply but it is confusing. If you could help me with some coding, it will be great.
×
×
  • Create New...