I have a problem with a button inside a div that affects a different div. Here's the basic outline:
<div>
<div>
<div>
<div>
<button>THIS BUTTON</button>
<div></div>
</div>
</div>
</div>
<div>
<table>THIS TABLE</table>
</div>
</div>
Intuitively, I would say that adding or removing that button should have no effect on the table and the div containing the table.
I want this table to be as wide as possible.
And without the button it looks like this:
But then I added JavaScript code that exports the table contents into a CSV file.
Once I added the button to do this action, the table becomes narrower:
Here's is the sample code as a standalone HTML file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
alert('ok?');
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
Login
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
I copied your code into JS snippet. The button doesn't seem to cause any problems.
Quick update: it behaves differently on full screen.
A quick workaround is to add width: 100% to your table's container.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
Login
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row" style="width: 100%">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to get code mirror to read and display the contents of a file into the textarea, but everytime I load a file, it prints the contents as one line, ignoring all line breaks, and if I try to manually enter text into the text field, it automatically tabs every line after the first.
Proper text form file format:
Proper textarea styling:
Unfortunate result of selecting a file (this text format won't function with the compile button):
Full HTML code (with suggested edits; still not working):
<!DOCTYPE html>
<html lang="en_US">
<head>
<title>Phoenix - UMSL's Online Assembly Code Compiler</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/colorforth.css">
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/cobol/cobol.js"></script>
<link rel="stylesheet" href="CSS/styling.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>
<body>
<fieldset>
<!-- Form Name -->
<nav class="navbar navbar-expand-lg navbar-expand-lg" style="border-bottom: 5px solid white;">
<a class="navbar-brand" href="./homepage.html"> <img src="IMGS/phoenix-small.png">PHOENIX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./homepage.html">Home</a>
<a class="dropdown-item" href="./reference.html">Reference</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="./about.html">About Team Phoenix</a>
</div>
</li>
</ul>
</div>
<a style="color:white;">UMSL's Online Assembly Code Compiler</a>
</nav>
<div class="WORKPLEASE" style="max-width: 98%;">
</br>
</br>
</br>
</br>
</br>
<!-- File Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile: </br></label>
<div class="row justify-content-md-center">
<input id="filebutton" name="filebutton" class="input-file" type="file">
<!--File Upload Script -->
<script type="text/javascript" src="fileUploadScript.js"></script>
</div>
</div>
</br>
<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or... </br></p>
</div>
</br>
<!-- Textarea -->
<div class="form-group">
<label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br></label>
<div class="col-md-6 offset-md-3">
<div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid;"></div>
<script>
let editor = CodeMirror(document.getElementById("textarea"),{
lineNumbers: true,
mode: "cobol",
theme: "colorforth"
});
document.getElementById("filebutton").addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
editor.setValue(this.result); // Need to use the setValue method
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
</script>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="singlebutton"></label>
<div class="row justify-content-md-center">
<button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
<script src="assmblyCode.js"></script>
</div>
</div>
</div>
</fieldset>
<!--<div id="footer">-->
<!--<p style="padding-top: 25px;">-->
<!--© Copyright 2019 Team Phoenix-->
<!--</p>-->
<!--</div>-->
</body>
</div>
The styling.css file:
/* Color assignment */
body {
background-image: url("../IMGS/binary.gif");
background-color: #cccccc;
}
.form-group{background-color:black;}
head {background-color: firebrick;}
h1 {color: blue}
h2 {color: snow}
nav {background-color: firebrick;}
a {color: snow;}
div {color: Azure}
/*italicizes and specifies which page you are on with color*/
a:hover{font-style: italic;}
/* alignment and font size */
head { font-size: 20pt}
h1 {text-align: center}
h2 {text-align: center}
h2 {font-size: 22pt}
.argname {font-size: 20px; text-decoration: underline; padding-top: 10px; background-color: black;}
.sides{ width:50%; float:left; padding-left: 20px}
.LI-profile-badge{
width:25%;
float:left;
padding-left: 20px;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background-color: black;
text-align: center;
}
The fileUploadScript.js used to load the file into the text area:
document.getElementById("filebutton").addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
//https://www.youtube.com/watch?v=QI_NClLxnF0
Hopefully someone can spot what's being done wrong.
CodeMirror has several Content manipulation methods. You will need to use the setValue method.
doc.setValue(content: string)
Set the editor content.
Please reference the following block of code for my suggestions.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>
<body>
<!-- File Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile:</label>
<div class="row justify-content-md-center">
<input id="filebutton" name="filebutton" class="input-file" type="file">
</div>
</div>
<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or...</p>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br>
</label>
<div class="col-md-6 offset-md-3">
<div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid; border-width: 1px; border-color: gray"></div>
<!-- This is where I think the problem is -->
<script>
let editor = CodeMirror(document.getElementById("textarea"), {
lineNumbers: true,
mode: "cobol",
theme: "colorforth"
});
document.getElementById("filebutton").addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
editor.setValue(this.result); // Need to use the setValue method
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
</script>
<!-- This is where I think the problem is -->
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="singlebutton"></label>
<div class="row justify-content-md-center">
<button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
</div>
</div>
</body>
</html>
More specifically, editor.setValue(this.result); is what got it working. Take a look at this JS Bin
In your fileUploadScript.js you must use editor.setValue().
document.getElementById("filebutton").addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
editor.setValue(this.result);
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
You can't force the code into the textarea. It just won' work. You have to use the setValue method as shown above.
CodeMirror: Usage Manual.
I have applied onblur to a div and want to fire that event when its child element loses focus. The div has two child elements, one of them is a textbox and the other is a div. Now when I click the textbox and click on outside of the parent div, it doesn't fire the onblur event but if I click on the child div and click outside of the parent div, then it does fire the event.
My requirement is the onblur event of the parent div should also fire if i click on the textbox and click on other div, like it is firing in case of the other child element. I am including my code snippet here, and you can run to see the output. In case you want to see the code in jsfiddle then click here. Please help.
function searchOnClick() {
document.getElementById("resultsSugg").className = "position-absolute d-block";
}
function focusOut() {
document.getElementById("resultsSugg").className = "position-absolute d-none";
}
function resOnclick(that) {
let data = that.getAttribute("data-ppp");
document.getElementById("inputText1").value = data;
}
.suggestions {
font-size: 0.9em;
border-bottom: 1px solid #eeeeee;
padding: 0.5rem 0.5rem;
background-color: white;
}
.suggestions:hover {
background-color: #f4f4f4;
}
.suggestions:last-child {
border-bottom: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">
<label>dummy text</label>
</div>
<div class="col-4">
<div id="bloodhound">
<!--<input type="text" class="typeahead form-control" id="typeAheadText">-->
<div tabindex="0" onblur="focusOut()">
<input type="text" class="typeahead form-control dropdown-toggle"
id="inputText1" onkeyup="return searchElastic()" onclick="searchOnClick()"/>
<div class="position-absolute d-none" style="width: 100%; border:1px solid #eeeeee; z-index: 999;"
id="resultsSugg">
<div class="suggestions" onclick='return resOnclick(this)' data-ppp='John'>
<span>John</span> <span>Doe</span>
</div>
<div class="suggestions" onclick='return resOnclick(this)' data-ppp='Rocky'>
<span>Rocky</span> <span>Balboa</span>
</div>
<div class="suggestions" onclick='return resOnclick(this)' data-ppp='Samim'>
<span>Samim</span> <span>Yo</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<label>dummy text</label>
</div>
</div>
<div class="row">
<div class="col-10 offset-1">
<div>
<br><br><br>
<strong>Steps to reproduce the problem</strong><br>
<ul>
<li>Click on the textbox, then</li>
<li>Click on dummy text and click just outside of the parent div. It won't hide</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I have an image gallery that I created with jQuery, it works very well when I click on each image and it appears in another div. Everything was created with Bootstrap. But I would also like to add a prev and back arrow buttons and I have no clue on how to do that.
This is the HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected { border: 2px solid #000; }
.output img {
margin:0 auto;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="JS/lightbox.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container container-fluid ">
<div class="row text-center gallery">
<h2>Gallery</h2>
<div class="col-sm-4 ">
<p>Dimebag</p>
<img src="http://img.wennermedia.com/article-leads-horizontal/rs-3616-rectangle.jpg" class="img-responsive" alt="Dimebag">
</div>
<div class="col-sm-4 ">
<p>Zack Wylde</p>
<img src="http://loudwire.com/files/2016/05/Ozzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg?w=630&h=420&zc=1&s=0&a=t&q=89" class="img-responsive" style="width:100%" alt="Zack">
</div>
<div class="col-sm-4 ">
<p>Slash</p>
<img src="http://mmusicmag.com/m/wp-content/uploads/2015/01/Slash-Issue-No37.jpg" class="img-responsive" style="width:100%" alt="Slash">
</div>
</div><!--row-->
<hr>
<div class="row ">
<div class="text-center arrows">
<a class="prev" >❮</a>
<a class="next" >❯</a>
</div><!--arrows-->
<div class="col-md-12 output"></div>
</div><!--row-->
</div>
</div><!--container-fluid-->
</body>
</html>
And this is the jQuery code:
$(document).ready(function(){
$(".output").hide();
$(".arrows").hide();
$('img').click(function(){
$(".output").html('<img class="img-responsive " src="' + $(this).attr('src') + '"/>').fadeIn();
$(".arrows").fadeIn();
});//click
//Arrows
$('.next').click(function(){
//Code Here
});//next
});
I know that I have to add some coding in the function that target the arrow with the class next but Im not sure what.
I have problem with carousel,
I have tried a lot, but I am not able to solve
I have one carousel with 4 images.Here i want to like in 1st iteration:
1-2-3-4
2nd iteration: 4-5-6-7
3rd iteration:7-8-9-10
this will when we click on corousel.
here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CustomStyles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: false
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-inner .active.left { left: -25% ; }
.class-inner .active.right{left : 25%;}
.carousel-inner .next { left: 25% ; }
.carousel-inner .prev { left: -25% ; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}
</style>
</head>
<body>
<div class="col-xs-12 text-center" style=" direction: ltr">
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3"><img src="1.jpg" href="sa.html" class="img-responsive">1</div>
</div>
<div class="item">
<div class="col-md-3"><img src="2.jpg" class="img-responsive">2</div>
</div>
<div class="item">
<div class="col-md-3"><img src="3.jpg" class="img-responsive">3</div>
</div>
<div class="item">
<div class="col-md-3"><img src="4.jpg" class="img-responsive">4</div>
</div>
<div class="item">
<div class="col-md-3"><img src="5.jpg" class="img-responsive">5</div>
</div>
<div class="item">
<div class="col-md-3"><img src="6.jpg" class="img-responsive">6</div>
</div>
<div class="item">
<div class="col-md-3"><img src="7.jpg" class="img-responsive">7</div>
</div>
<div class="item">
<div class="col-md-3"><img src="8.jpg" class="img-responsive">8</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>
I think it would be better to use a different carousel:
http://bxslider.com/examples/carousel-dynamic-number-slides
It's easy to use and responsive ;)
Here you find exactly what you want.
http://kenwheeler.github.io/slick/
Please find below working demo.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>
I am very very new to javascript/Html/CSS and have to use it to add small functionality in one of the existing websites. I am planning to have a resizable division so that if we have a bigger image/drawing on the left side of division it can be resized. The right side of the division is text.
I have used resizable() function and when I resize the first division the other division goes into a new line. I am not sure how to fix this. When the page loads, I need the background division to have 50% width and textfield to have 47.5%. But, on resizing background division - the textfield should auto resize it's width.
Edit: fixed the html typo issue.
Code: https://jsfiddle.net/yguw/t3e9xgbg/
Please suggest as to how I fix this problem.
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="../css/test.css">
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.11.4.min.css">
<link rel="stylesheet" type="text/css" href="../css/menu.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#background").resizable();
});
</script>
</head>
<body>
<!-- Code block start - NT -->
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
<!--<script type="text/javascript" src="../js/testYG.js"></script> -->
</body>
<div class="mainDiv">
<div id="resizable" class="background" id="background"></div>
<div id="resizable" class="textField" id="textDivField">
</div>
</div>
</html>
instead float, you may use display: table or flex to draw a row.
$(function() {
$("#background").resizable();
});
.mainDiv {
height: relative;
display:table;
width:100%;
}
:root {
background: 900px;
position: relative;
}
#background {
background-color: rgb(255, 200, 240);
height: 50vh;
width:50%;
display:table-cell;
margin: 0;
}
#textField {
background-color: rgb(240, 240, 200);
display:table-cell;
padding: 1%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
$(function() {
$("#background").resizable();
});
.mainDiv {
height: relative;
display: flex;
}
:root {
background: 900px;
position: relative;
}
#background {
background-color: rgb(255, 200, 240);
height: 50vh;
width: 50%;
margin: 0;
}
#textField {
background-color: rgb(240, 240, 200);
position: relative;
flex: 1;
padding: 1%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>