JSON.stringify() displays content in JSON format.I would like the quote in quote class and character in character class.So that on click of button i'll get message and quote displayed.
//HTML
<div class="container-fluid">
<div class = "row text-center">
<h2>GOT Quotes</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well quote">
The message will go here
<br>
<div class = "col-xs-12 well character">
Said By
</div>
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
//JS
<script>$(document).ready(function () {
$('#getMessage').click(function () {
$.getJSON('https://got-quotes.herokuapp.com/quotes', function (json) {
$('.quote').html(JSON.stringify(json));
});
});
});
Is this what you want? Note that I moved the quote class down to a span within the div so you don't overwrite the nested character div. I also used .text() instead of .html(). This is the right thing to do if you're dealing with text.
$(document).ready(function () {
$('#getMessage').click(function () {
$.getJSON('https://got-quotes.herokuapp.com/quotes', function (data) {
$('.quote').text(data.quote);
$('.character').text(data.character);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class = "row text-center">
<h2>GOT Quotes</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well">
<span class="quote">The message will go here</span>
<br>
<div class = "col-xs-12 well character">
Said By
</div>
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
Related
I am trying to develop a page where there would be multiple divs, each of these divs have a button of which would show a "dropdown" style div below it when clicked.
Currently I have some code which when one button is clicked, it shows all of the "dropdown" styled divs on the page instead of just the one in the same container as the button.
I would like this to be done in pure JavaScript without jquery, any help would be appreciated, thank you!
HTML
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog() {
var btn = document.getElementsByClassName("mobileShowActivityFeedBtn");
var activity = document.getElementsByClassName("mobileDropDown");
for(var i=0; i<btn.length; i++) {
for(var j=0; i<activity.length; j++) {
if(activity[j].style.display == "none") {
activity[j].style.display = "flex"
} else {
activity[j].style.display = "none"
}
}
}
}
I think the easiest way is to send a parameter to the method and getElementById with a concatenated string with the parameter.
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(1)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown-1">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(2)"> Show activity feed </button>
</div>
</div>
<div id="mobileDropDown-2">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog(index) {
var activity = document.getElementsById("mobileDropDown-" + index);
if(activity.style.display == "none") {
activity.style.display = "flex"
} else {
activity.style.display = "none"
}
}
One of the best possible ways to achieve this is to pass the current context using 'call' in the HTML. Use this context to target the required result container(here 'mobileDropDown' container).
function mobileActivityLog () {
var _this = this;
var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown");
activity.classList.toggle('hide');
}
.hide {
display: none;
}
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
I have a span called span#about, which when I click on it, I want to scroll down the page to the top of a div called div#perthImage
When I click on the span, it displays 'scroll initiate' so I know that the click is being registered however it does not scroll. Can somebody please assist me.
$(document).ready(function () {
$("span#about").click(function () {
console.log('scroll initiate')
$('html,body').animate({ scrollTop: $('div#perthImage').offset().top }, 200);
});
});
My HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id='nav' class="nav">
<div class='row'>
<div class = 'col-xs-12' id = 'aboutBtn'>
<span id = 'about'>About Us</span>
</div>
<div class = 'col-xs-12' id = 'citiesBtn'>
<span id = 'cities'>Cities <i class="fa fa-angle-down" aria-hidden="true"></i></span>
<div id = 'oncityhover'>
<div class = 'row' id = 'citiesDropdown'>
<div class = 'menuItem col-xs-12' id = 'perthScroll'>
Perth City
</div>
</div>
</div>
</div>
</div>
</div>
<div id = 'homeLogo'>
<center>
<img id='logo' src="images/CulturedLogo.png">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<div class = 'cities row'>
<div class = 'locImage col-md-6' id = 'perthImage' title = 'Perth City' alt = 'Perth City'>
<center>
<h4 id = 'perth'>Perth City</h4>
</center>
</div>
</div>
I'm definitely going about this all wrong but there must be a way to simplify this process. I have a modal that contains 4 forms all hidden except one that has a class "active". I need to trigger each individual form based on click events from different buttons ie. sign-up / forgot-password / sign-in etc. so when i click the sign-up button the modal appears with the signup form active, clicking the forgot password just switches the form to show the forgot password. and so on.
my thinking was to create:
function modalSwitch() {
var btnModal = [$('btn-one'),$('btn-two'),$('btn-three'), $('btn-four')];
var formModal = [$('form-one'),$('form-two'),$('form-three'), $('btn-four')];
btnModal.click(function(){
if ( btnModal[].attr('class') === formModal[].attr('data-id')) {
formModal.addClass('active');
}
});
}
modalSwitch();
instead of the on click event for :
function modalSwitch() {
var btnOne = $('.btn-one');
var btnTwo = $('.btn-two');
var btnThree = $('.btn-three');
var btnFour = $('.btn-four');
var btnFive = $('.btn-five');
var btnSix = $('.btn-six');
var modalOne = $('.modal-one');
var modalTwo = $('.modal-two');
var modalThree = $('.modal-three');
var modalFour = $('.modal-four');
var modalFive = $('.modal-five');
var modalSix = $('.modal-six');
btnOne.click(function(){
modalOne.addClass('show');
modalTwo.removeClass('show');
modalThree.removeClass('show');
modalFour.removeClass('show');
modalFive.removeClass('show');
modalSix.removeClass('show');
....
});
}
modalSwitch();
but i'm so lost right now, any help will be appreciated
You can use data-src attribute to achieve this, for example:
<a href="#" class="btn btn-normal open-logs" data-src="my_details" data-heading="My Heading">
Demo
</a>
<div id="my_details" class="hide">
your form here
</div>
Create a css class to hide the div by default.
Something like this to open modal box:
$(document).ready(function() {
$(".open-logs").click(function(e){
e.preventDefault();
var logId = $(this).data('src');
var html = $("#"+logId).html();
$("#myModalLabel").html($(this).data('heading'));
$("#modalBody").html(html);
$("#logModal").modal('show');
});
});
Code below will solve all your query. Code in snippet have an extra set of css and js which will generate bootstrap model for you. You don't need to write conventional and same block of code for all your models.
function simpleSHow(title)
{
var msg=$('#simple-div');
BootstrapDialog.show({
title : title,
message: $('#simple-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function complexSHow(title)
{
var msg=$('#complex-div');
BootstrapDialog.show({
title : title,
message: $('#complex-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv1(div_id)
{
var msg=$('#lavel-2_div-1');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-1'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv2(div_id)
{
var msg=$('#lavel-2_div-2');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-2'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv3(div_id)
{
var msg=$('#lavel-2_div-3');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-3'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv4(div_id)
{
var msg=$('#lavel-2_div-4');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-4'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<!-- This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
<div id="simple-div">
<h1>This is H1 Heading</h1>
This is most simple coding
<br>
<button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
<button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
</div>
<div id="lavel-2_div-1">
<h3>This is Level 2 Header</h3>
<span style="color : blue;">This is Level 2 Message 1</span>
</div>
<div id="lavel-2_div-2">
<h3>This is Level 2 Header</h3>
<span style="color : greenyellow;">This is Level 2 Message 2</span>
</div>
<div id="lavel-2_div-3">
<h3>This is Level 2 Header</h3>
<span style="color : pink;">This is Level 2 Message 3</span>
</div>
<div id="lavel-2_div-4">
<h3>This is Level 2 Header</h3>
<span style="color : green;">This is Level 2 Message 4</span>
</div>
<div class="container-fluid" id="complex-div">
<button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
<button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.