Pass html file as the value of innerHTML - javascript

I am calling a function that replaces innerHTML of a div when a user clicks on a particular div. I am able to pass raw html code inside the function to achieve the desired result but I want to use the same function to dynamically replace the content of different divs depending on which div was clicked.
For instance if div1 was clicked then the innerHTML should be replaced with a div1.html file and div2 with div2.html file. I coming from a PHP background and just learning vanilla javascript so I'm wondering how this can be done.
Here's some sample code I playing around with
function jobDescription() {
document.getElementById('details').innerHTML = "\
<div class=\"col-12 fade show\">\
<div class=\"card text-white bg-dark\">\
<div class=\"card-body text-center\">\
<h4 class=\"card-title\">Fullstack Web Developer</h4>\
<p class=\"card-text\">REMOTE</p>\
</div>\
</div>\
</div>\
";
}
<div id="details" class="row align-items-center mt-5">
<div id="freelance" class="col-lg-4 col-md-6 mb-3" onclick="jobDescription()">
<div class="card text-white bg-dark">
<div class="card-body text-center">
<h4 class="card-title">Backend Web Developer</h4>
<p class="card-text">FREELANCE</p>
</div>
</div>
</div>
</div>


For this you can use the concept of iframes.
function FuncDesc(id, val)
{ alert(val);document.getElementById('i'+id).src = val; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<div id ="div1" onclick="FuncDesc(this.id, 'div1.html')">Div1</div>
<div id ="div2" onclick="FuncDesc(this.id, 'div2.html')">Div2</div>
<iframe id="idiv1"></iframe>
<iframe id="idiv2"></iframe>
</body>
</html>

Related

Click button, turn image and show another div

I have a screen like this:
So what I am trying to do is when the CLICK button is clicked, return the image on the right and show the result box (which is div).
So the section is like this:
<section class="weight__calculations">
<div class="container calculations__content">
<div class="row contents">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="form-group">
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
HESAPLA
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="result__box">
<div class="title">RESULT</div>
</div>
</div>
</div>
</div>
</section>
And I hided calculate__content__result in css:
.calculate__content__result {
display:none;
}
But I dont know how to show it again and display none picture with the return effect.
Thanks for your help.

check this out it may help in your needs... Same time you toggle the class name of image too.
css
.calculate__content__result_show{
display : block ;
}
jquery
$(document).on('click','.click',function(){
$('.calculate__content__result').toggleClass('calculate__content__result_show');
});
javascript
var clickBtn = document.querySelector('.click');
var result = document.querySelector('.calculate__content__result');
clickBtn.addEventListerner('click',function(){
result.classList.toggle('calculate__content__result_show');
});

Add an ID in the element you want to hide/show
<div id="imageDiv" class="col-lg-6 col-md-12 col-sm-12 calculate__content">
and add functions to hide/show with javascript at the the begining of the html
<script>
function showImage(){
document.getElementById("imageDiv").style.display = "block";
}
function hideImage(){
document.getElementById("imageDiv").style.display = "none";
}
</script>
Call the functions when needed, for example:
<button onclick="showImage()" class="button-secondary button__calculate">
Click
</button>

How to make multiple div on same page to appear only once per browser session. (Javascript code)

Need to show the div only once, but not able to set a different cookie for multiple div.
function closeNotice() {
$("#hidebox").fadeOut("slow");
}
<body>
<html>
<div id="hidebox">
<div class="text-content cmp-close-icon hidden-xs welcome">
<a class="close-notify" onclick="closeNotice()">X</a>
<h1 class="title1">Hello World</h1>
</div>
</div>
<div id="hidebox">
<div class="text-content cmp-close-icon hidden-xs welcome">
<a class="close-notify" onclick="closeNotice()">X</a>
<h1 class="title1">Hello World</h1>
</div>
</div>
</body>
</html>

Unable to use $.after() to close a div tag

This problem is best illustrated by example:
http://jsbin.com/lavonexuse
The desired effect is for clicking "Insert Row" to insert a full-width row after the indicated column (indicated by the class .insertion-point). The problem I'm running into is that instead of closing the current row first, and starting a new one, it just embeds a new row within the main row.
How do I close out the current row after any given column, make a new row, close that one, then resume showing the "data" columns?
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
<button class="btn btn-primary insert-row">Insert Row</button>
</body>
</html>
CSS:
.item {
border: 1px solid #f00;
}
.pane {
background: #999;
height: 100px;
}
JavaScript:
$('.insert-row').on('click', function() {
code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';
$('.insertion-point').after(code);
});
EDIT:
The code string above probably should end with <div class="row"> to re-open the row. But I tried that and it still doesn't work.
The problem here is that visually it looks like my solution works. Though in reality, it's creating bad HTML.
Further explanation (I think this is hard to explain). Here is what's happening, and this is NOT what I want:
I need that inserted row to be at the same level as the row it was erroneously inserted into.
Desired HTML after jQuery manipulation
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
</div>
<div class="row">
<div class="col-sm-12 pane"></div>
</div>
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
Further Ramblings
Maybe, since this is Bootstrap, there's some way I can use the grid system to have the same effect.

The code below should resolve your issue. Check out the code snippet and demo:
$('.insert-row').on('click', function() {
var row = $('<div/>',{class:"row"}),
code = '<!--end row--><div class="row"><div class="col-sm-12 pane">New</div></div>',
rest = $('.insertion-point').nextAll(),
dest = $('.insertion-point').closest('.row');
dest.after( row.append( rest ) ).after( code );
});
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
<button class="btn btn-primary insert-row">Insert Row</button>

i worked out this four you: JsFiddle
$(document).ready(function() {
var firstRow = $('.row');
$('.insert-row').on('click', function() {
var code = $('<div/>', {clas: 'row'}).append($('<div/>', {class: "col-sm-12 pane"})),
row = $('<div/>', {class: 'row'}),
items = $('.insertion-point').nextAll();
row.append(items);
firstRow.after(row);
firstRow.after(code);
});
});
Update:
after seen the nextAll function by jQuery .. this will be much faster:
updated fiddle

I think what you need is appendTo which will append html onto the specified tag. In this case you want to append a div onto your row.
http://api.jquery.com/appendto/

Just get rid of the closing tag in the code variable and your code will work and be well formed
code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';
should be
code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
Also you need to insert rows after / before other rows like so
$('.insert-row').on('click', function() {
code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
$('.insertion-point').closest(".row").after(code);
});
The above code finds where you want to insert (which I changed to be an id selector since you want to insert after one unique element). However you want to find the closest parent element (or this one) that is a row so that you insert a row after that row. This way you can choose a row or a column to insert after and it will always insert a row after the closest row properly.
Lucky for you browsers are very forgiving when it comes to syntax errors in HTML. They will remove the initial closing tag (which is unnecessary) and use the rest of your HTML. But some browser may behave differently and that is what you have to be careful of.

You need to add a new row after the first by removing the elements after the insertion point and including them in the new row.
You can't treat the DOM like a text editor when inserting html.
$('.insert-row').on('click', function() {
var $insertEL=$('.insertion-point');
var code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
/* create new row and append all siblings after insertion point element*/
var $newRow=$(code).append($insertEL.nextAll());
/* add new row to DOM*/
$insertEL.closest('.row').after($newRow);
});
DEMO

Got it!
Layout solved by using Bootstrap grid, very little jQuery DOM manipulation. I don't know why I didn't think of this earlier. Sheesh. I've been coding for hours non-stop, my brain is fried.
Solution: http://jsbin.com/zopiquzore
This is correct, yes?

Capturing the output of a JavaScript function

Using C#, PowerShell and Jsoup I've tried to capturing the percentage that is displayed at the end, 99.96%. Using the DOM explorer in IE, this is what I see:
<!DOCTYPE html>
<html>
<body id="website#22;page">
<div id="wrap">
<script type="text/javascript">...</script>
<div class="topRow" id="iTopRow">...</div>
<div id="header">...</div>
<div id="content">
<div class="paddingfix">
<script type="text.javascript">...</script>
<div class="toppaddingfix"></div>
<div title="Summary Percentage"
class="overallPercentage">
<div>
<div style="padding-bottom: 12px;">
<div class="textRegionContainer" id="iTextRegion_D14">
<div class="position" style="display: none;"<>/div>
<div class="status" style="display: none;">loaded</div>
<div class="textRegionPlaceHolder">
<p class="textRegionTitle">
99.96 %
</p>
</div>
</div>
</div>
However, when programmatically trying to capture it I receive this:
<div id="iTextRegion_DR14" class="textRegionContainer">
<script type="text/javascript">
$(document).ready(function() {
var client = new wLive.Service.Client(false);
var textRegion = new wLive.Controls.TextRegion(
'Tools',
'AppServerOutDetails3',
'DR14',
'#iTextRegion_DR14',
{"id":"DR14","data":null,"paragraphs":["<bindingref
name=\"Reliability\" \/> %\u000d\u000a "],"style":0},
client);
wLive.Controls.DataBridge.registerDataRegion('#iDataBridge', textRegion);
});
</script>
</div>
How do I programmatically capture that percentage so I can then have another program evaluate it's value?

How to change img to div in waterwheelCarousel?

I want to change img element in waterwheelCarousel
I have tried to replace img with div in .js/.css
so my html look like :
<div id="waterwheel-carousel-default">
<div class="carousel-controls">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
</div>
<div class="carousel-images">
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
<div style="background-image:url('images/testImage1.png')">hhhhh</div>
</div>
</div>
My Js file I have replace every :
$(this).find(".carousel-images img").length
itemsContainer.find('img')
Respectively with:
$(this).find(".carousel-images > div").length
itemsContainer.find('div')
but it dosen't work any one can help?

Categories

Resources