I tried the following JavaScript/jQuery code to change the border thickness.
But this is not working. Please help me.
//$("span").css({"border":"4px solid green"});
document.getElementById("192.168.42.151:8984_solr").getElementsByClassName("trees_shard1_replica_n1").find("span").style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
Mirror: https://jsfiddle.net/amitkushwaha1710/asdxfc94/44/
Problem in your id attribute, id="192.168.42.151:8984_solr
id attribute must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods (".").
change it and it will work.
you can do something like
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
$('.card-body').find(".trees_shard1_replica_n1").find("span").css({'color':'red'});
Your code is wrong, Basically It's a mix between jquery and javascript.
Try this: (No jquery required)
document.getElementsByClassName("trees_shard1_replica_n1")[0].querySelector('span').style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
You can not find an element by find() in javascript so you can go the following way
//$("span").css({"border":"4px solid green"});
var solrId = document.getElementById("192.168.42.151:8984_solr").getElementsByClassName('trees_shard1_replica_n1')[0];
solrId.getElementsByTagName("span")[0].style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
Hope This will help.
var replicaNodeName="192.168.42.151:8984_solr";
$(document.getElementById(replicaNodeName)).find(".trees_shard1_replica_n1").find("span").css({'border':'4px solid green'});
Related
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I'm looking for a way to loop through all containers with a given class (.war) and being able to perform the comparation between two child elements and adding a different class to each one of them (winner / loser).
Optimizing the DOM, being able to remove .score a / .score b and leave it all with .score will be awesome if possible.
I tried iterating with child elements with javascript and jquery, with no results.
var scoreA = document.getElementsByClassName("score a")[0];
var scoreB = document.getElementsByClassName("score b")[0];
if (scoreA > scoreB) {
scoreA.classList.add("win");
scoreB.classList.add("lose");
} else {
scoreA.classList.add("lose");
scoreB.classList.add("win");
}
.team { padding: 8px 10px; display: inline-block;}.team:nth-child(1) .score { text-align: right; display: block;}.team:nth-child(2) { text-align: right;}.team:nth-child(2) .score { text-align: left; display: block;}.war { display: inline-block; background-color: #F4F5F7; border-radius: 4px; position: relative; margin: 2px 0;}.score { border-radius: 4px; padding: 1px 5px;}.score.lose { background-color: rgba(255, 0, 0, .1);}.score.win { background-color: rgba(0, 255, 0, .15);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
<div class="team">
<span class="score a">4</span>
</div>
<div class="team">
<span class="score b">2</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">8</span>
</div>
<div class="team">
<span class="score b">5</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">2</span>
</div>
<div class="team">
<span class="score b">3</span>
</div>
</div>
To achieve this you need to select all the .war elements, which you can achieve with querySelectorAll(), then loop through them and compare the scores of the child elements.
Also note that you need to convert the string scores to integers, otherwise 2 would be considered higher than 12. Try this:
document.querySelectorAll('.war').forEach(function(war) {
var scoreA = war.getElementsByClassName("score a")[0];
var scoreB = war.getElementsByClassName("score b")[0];
if (parseInt(scoreA.innerText, 10) > parseInt(scoreB.innerText, 10)) {
scoreA.classList.add("win");
scoreB.classList.add("lose");
} else {
scoreA.classList.add("lose");
scoreB.classList.add("win");
}
});
.team {
padding: 8px 10px;
display: inline-block;
}
.team:nth-child(1) .score {
text-align: right;
display: block;
}
.team:nth-child(2) {
text-align: right;
}
.team:nth-child(2) .score {
text-align: left;
display: block;
}
.war {
display: inline-block;
background-color: #F4F5F7;
border-radius: 4px;
position: relative;
margin: 2px 0;
}
.score {
border-radius: 4px;
padding: 1px 5px;
}
.score.lose {
background-color: rgba(255, 0, 0, .1);
}
.score.win {
background-color: rgba(0, 255, 0, .15);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
<div class="team">
<span class="score a">12</span>
</div>
<div class="team">
<span class="score b">2</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">8</span>
</div>
<div class="team">
<span class="score b">5</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">2</span>
</div>
<div class="team">
<span class="score b">3</span>
</div>
</div>
If you'd prefer to do this without explicitly referencing the .score.a and .score.b elements, then you could use reduce to get the index of the highest score and then apply the classes based on that index:
document.querySelectorAll('.war').forEach(function(war) {
var scores = Array.from(war.getElementsByClassName("score"));
var winIndex = scores.reduce((iMax, x, i, arr) => parseInt(x.innerText, 10) > parseInt(arr[iMax].innerText, 10) ? i : iMax, 0);
scores.forEach((score, i) => score.classList.add(winIndex == i ? 'win' : 'lose'));
});
.team {
padding: 8px 10px;
display: inline-block;
}
.team:nth-child(1) .score {
text-align: right;
display: block;
}
.team:nth-child(2) {
text-align: right;
}
.team:nth-child(2) .score {
text-align: left;
display: block;
}
.war {
display: inline-block;
background-color: #F4F5F7;
border-radius: 4px;
position: relative;
margin: 2px 0;
}
.score {
border-radius: 4px;
padding: 1px 5px;
}
.score.lose {
background-color: rgba(255, 0, 0, .1);
}
.score.win {
background-color: rgba(0, 255, 0, .15);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
<div class="team">
<span class="score a">4</span>
</div>
<div class="team">
<span class="score b">2</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">8</span>
</div>
<div class="team">
<span class="score b">5</span>
</div>
</div>
<div class="war">
<div class="team">
<span class="score a">2</span>
</div>
<div class="team">
<span class="score b">3</span>
</div>
</div>
I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.
Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )
var pro_nm = $(this).siblings('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).parent().find('.proname').val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
or get the parent using parent() and find the element inside
var pro_nm = $(this).parent().find('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).siblings('.proname').val();
// or
// var pro_nm = $(this).next().val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
Just try this:
Fiddle: http://jsfiddle.net/kjoLyf9d/
just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
alert(pro_nm);
});
Since jQuery uses CSS selectors you could technically do something like
$('#proimg:nth-of-type(2)')
in order to select the second #proimg element, but having more than one element with the same id is just bad practice.
Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have
Your jQuery code should be replaced with class selector.
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val();
console.log("test",pro_nm);
});
I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!
I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.
skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.