On click of View All Descriptions, I should be able to show the following div's and change the View All Descriptions content to hide all descriptions and when clicked it again it should be able to hide the following div's and change the clickable content to "View all descriptions"
.hiddenComments {
display: none;
padding: 5px;
}
.showComments {
display: inline-block;
padding: 5px;
}
<div class="row outer-part col-md-offset-1">
<div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
<a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="hiddenComments">Sample text;</span>
</div>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="hiddenComments">sample text</span>
</div>
</div>
If you will be more specific i will be able to help you better..Meanwhile take a look at this:
$('a').click(function () {
$('a').text('Hide');
$(".hiddenComments").addClass('showComments');
$('.hiddeComments').removeClass('hideComments');
});
No css needed, no extra classes, just jquery events. Next time read about jquery documentation before ask here, it will be better for your learning. https://api.jquery.com/
$('#lnkViewAll_DRILLING').click(function() {
var $this = $(this);
var text = ($this.text() != 'Hide All Descriptions') ? 'Hide All Descriptions' : 'Show All Descriptions';
$this.text(text);
$(".comments").toggle();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="row outer-part col-md-offset-1">
<div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
<a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="comments">Sample text;</span>
</div>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="comments">sample text</span>
</div>
</div>
</div>
</body>
</html>
You can try using:
divElement.childNodes[0].style.display = "inline";//show element
divElement.childNodes[0].style.display = "none";//hide element
The first one shows the first element inside a parent element, and the second one hides it. Hope I helped!
Since you haven't really given any specific on your code, or what you've tried.. look into jQuery hide() method. Jquery Hide Documentation This will get you moving in the right direction
Related
I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?
Here are simple jquery codes;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
and html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Your img doen't contain class .thumbnail it is opposite like this,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
And also check your <img> tag.
You were not calling the right selector.
$('a.thumbnail').click(function () {
$('#productImage').attr('src',$(this).children('img').attr('src').replace('60/60','400/200'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='https://via.placeholder.com/400/200?text=nothing'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Try attaching the click event to a.thumbnail elements and than do a jQuery.find('img') to get the thumbnail image's src attribute:
$('a.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('60/60','400/200');
$('#productImage').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src="http://via.placeholder.com/400/200?text=otherimage0">
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=UrunResimi1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
$(document).ready(function(){
$('.thumbnail img').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
});
});
Your jquery selector is incorrect. It should be in this format and make sure you have document.ready function to make it work properly in all the browsers online or offline.
Plnkr Link
i have this code, witch is basically a click counter in javascript.
my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing.
all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
Only if one page opens the other one*.
If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.parent.document.
*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.
I have a webpage where I bind a click event on the element. When user clicks on the particular element. I want to get generate the XPath of the element starting from html or body tag. i.e "The Absolute Xpath"
Suppose in below html sample I click on span having text as "USA" so the Absolute Xpath would be
/html[1]/body[1]/div[2]/div[1]/div[1]/span[1]
<html>
<body>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
</body>
</html>
Do we have any library where it can help me generate the XPath where I pass the element Dom and it can generate it?
I came across few libraries but that help detect the Content inside the html based on provided Xpath.
You need to loop through clicked element and it parents to do this work. So you can call a function nesting to do this work.
var xpath;
$("*").click(function(e){
xpath = '';
addXpath($(this));
console.log(xpath);
e.stopPropagation();
});
function addXpath($ele){
var tagName = $ele[0].tagName.toLowerCase();
var index = $ele.parent().children(tagName).index($ele)+1;
xpath = '/'+tagName +'['+index+']'+ xpath;
!$ele.parent().is(document) ? addXpath($ele.parent()) : "";
}
body {background: green}
.header {background: orange}
.row_in {background: yellow}
.row_in_in {background: blue}
span {background: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
I have page structure on desktop like this:
<form>
___________________________________________________
| |
| [] checkbox |
| <div>TITLE</div> |
| <div>SUBTITLE</div> |
|_________________________________________________|
</form>
On mobile i want to have like this :
<form>
____________________
| |
| <div></div> |
| <div></div> |
| []checkbox |
|__________________|
</form>
code :
<form>
<div class="row">
<div class="col-sm-12 text-right visible-lg">
<input type="checkbox">
</div>
<div class="col-sm-12 text-center">
TITLE
</div>
<div class="col-sm-12 text-center">
SUBTITLE
</div>
<div class="col-sm-12 text-right hidden-lg">
<input type="checkbox">
</div>
</div>
</form>
tried to play with .visible-lg .hidden-lg and etc. but problem is that checkbox is same (cloned - same name, id, class) and when submitting form they are confusing all the logic. If first I checked but second not, in post I still get that it's checked.
What should i do in this case ?
Checkeboxes are toggles (bootstrapetoggle.com)
Use flexbox. You can set the order of any element inside of it. In this case, the default is order: 1; (and ties are solved by real order), and by setting the checkbox to order: 2; it shifts down under the other two.
#media (max-width: 480px) {
.row {
display: flex;
flex-direction: column;
}
#withcheckbox {
order: 2;
text-align: center;
}
}
JSFiddle
keeping you approach, the easiest way to solve is to enclose the fields in 2 different forms, with the same action. Something like:
<form action="/myaction"> <!-- sm-hidden -->
[] check
<div></div>
<div></div>
<submit />
</form>
<form action="/myaction"> <!-- lg-hidden -->
<div></div>
<div></div>
[] check
<submit />
</form>
the id needs to be different, but all you need on server side is the name attribute, not the id
-- EDIT --
if you don't mind use javascript to compose the page, you can use an html template:
function useTemplate(id) {
var myTemplate = document.getElementById('myTemplate'),
normalContent = document.getElementById(id),
clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
useTemplate('first-form');useTemplate('second-form');
<!-- Template Content -->
<template id="myTemplate">
<div><input /></div>
<div><input /></div>
<div><input /></div>
<div><input /></div>
</template>
<!-- Normal Content -->
<form>
<fieldset>
<input type='checkbox'/>
<div id="first-form">
</div>
</fieldset>
</form>
<form>
<fieldset>
<div id="second-form">
</div>
<input type='checkbox'/>
</fieldset>
</form>
Do something like this--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css"></style>
</head>
<body>
<form>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
---------
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
+++++++++
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
checkbox[]
</div>
</div>
</form>
</body>
</html>
This code is a part of the website which i am making and this section keeps overlapping images. How do I correct this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Image of the same:
Because you set image to be always 180x180 if the width will be lower than 540 (+some margins) they will overlap. You can disable it by setting overflow: hidden; on each column. But in your case this should not appear as you are using md columns.
So I think your problem is that you have too much columns. There should be next row each time you exceed row column limit in bootstrap default is 12.
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Make sure your css of the images is position: static;
If you want them in-line with one and other, add: display: inline-block; or if you want it just downwards: display: block;
Refer to positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position