http://i.stack.imgur.com/o2Kht.png
Basically I want these buttons to be side by side.
I've put them in a container but I cannot get them side by side like the example below.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- Linking Style Sheets -->
</head>
<body>
<style type="text/css">
<!-- Background image -->
</style>
<div class="img-wrapper-center" id="titlebar">
<img src="titlebar.png" id="img1"/>
</div>
</div>
<div id="bodycontainer">
<div id="text">
Welcome to the shop, you can add your items to to the cart below
</div>
<div id="formcontainer">
<div id="myForm">
<form name="theForm" action="shop.html" method="post" onSubmit="return checkWholeForm(theForm)">
<input type="radio" name="ram" value="yes">yes<br>
<input type="radio" name="ram" value="no">no
<br><br>
<input type="radio" name="cpu" value="yes">yes<br>
<input type="radio" name="cpu" value="no">no
<br><br>
<input type="radio" name="harddrive" value="yes">yes<br>
<input type="radio" name="harddrive" value="no">no
<br><br>
</div>
<div id="submitbuttons">
<input type="submit" value="Submit">
<input type="reset">
</div>
</div>
</form>
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
</body>
<!-- Start of rollover script -->
<script>
Rollimage = new Array()
Rollimage[0]= new Image(121,153)
Rollimage[0].src = "homebuttonup.png"
Rollimage[1] = new Image(121,153)
Rollimage[1].src = "homebutton.png"
function SwapOut() {
document.homebtn.src = Rollimage[1].src;
return true;
}
function SwapBack() {
document.homebtn.src = Rollimage[0].src;
return true;
}
Rollimageshop = new Array()
Rollimageshop[0]= new Image(121,153)
Rollimageshop[0].src = "shopbuttonup.png"
Rollimageshop[1] = new Image(121,153)
Rollimageshop[1].src = "shopbutton.png"
function SwapOutshop() {
document.shopbtn.src = Rollimageshop[1].src;
return true;
}
function SwapBackshop() {
document.shopbtn.src = Rollimageshop[0].src;
return true;
}
</script>
<!-- end of rollover script -->
<!-- Start of form validation -->
<script>
function checkWholeForm(theForm) {
var reason = '';
reason += checkRadioButtons(theForm.ram);
if (reason != '') {
alert(reason);
return false;
}
return true;
}
function checkRadioButtons(radiobuttons) {
var checkvalue = "";
var i=0;
var error = "";
var amountOfRadioButtons = radiobuttons.length;
for (i=0; i<amountOfRadioButtons; i++) {
if (radiobuttons[i].checked) {
checkvalue = theForm.ram[i].value;
}
}
if (!(checkvalue)) {
error = "Please choose an option for RAM.\n"
}
return error;
}
</script>
<!-- End of form validation -->
Sorry for delay, rofl im new to adding code to this so i did not know how to ident it.
.homebtn, .shopbtn{
display:inline; /*or inline-block*/
}
I made a jsfiddle here using images from google image search because I don't have access to your images, but the css should be quite similar for your own uses.
You should also fix your html for the button container
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()">
<img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()">
<img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
You currently have one button nested inside of the other.
Looking at your code, I can spot a few areas that can be improved.
First, you're using JavaScript to handle the button rollovers. Unless there is a specific reason to be doing this, it isn't necessary. A more efficient way to do this would be to use pure CSS for the button rollovers.
Second, you have the images embedded in the link itself:
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
If you were to actually use CSS based navigation, you wouldn't need to do this. The benefit is less code and ultimately page size and load time. Keep in mind, every image loading is a separate HTTP Request to the server. This equals more bandwidth in the long run. Your website may not be effected by this type of stuff, but it's good practice; best practices.
I have created a JSFiddle to show you how I would approach your navigation. One other thing I would add is putting all of the navigation imagery into a Sprite.
http://jsfiddle.net/cbPRv/
Related
this is my whole thing I just want my comments to help Please.
<!DOCTYPE html>
<html>
<head>
<title>Forum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="pixel">
<br>
<br>
<div class="blackBox">
<p class="white">| <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/index.html">Home</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/textboxPhase.html">Textbox Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/breakoutPhase.html">Breakout Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/goatPhase.html">Goat Cage Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/forum.html">Forum</a> |</p>
</div><br>
<br>
<h1>Welcome to The "There is no Game" Forum</h1>
<div class="container">
<h2>Leave us a comment</h2>
<form>
<textarea id="" placeholder="Add Your Comment" value=" "></textarea>
<div class="btn">
<input id="submit" type="submit" value="Comment"> <button id="clear">Clear</button>
</div>
</form>
<div class="comments">
<h2>Comments</h2>
<div id="comment-box">
<ul>
<li>WELCOME</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
const field = document.querySelector('textarea');
const backUp = field.getAttribute('placeholder')
const btn = document.querySelector('.btn');
const clear = document.getElementById('clear')
const submit = document.querySelector('#submit')
// const comments = document.querySelector('#comment-box')
const comments = document.getElementById('comment-box');
// array to store the comments
const comments_arr = [];
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment}<\/li>`;
})
list += '<\/ul>';
comments.innerHTML = list;
}
clear.onclick = function(event){
event.preventDefault();
// reset the array
comments_arr.length = 0;
// re-genrate the comment html list
display_comments();
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.push(content);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
</script><br>
<br>
<br>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</div>
</div>
</body>
</html
I know this code works but every time I reload it the comments disappear and I want it to save and all the code is too complex for my new code brain to understand. This is for my website and it's a basic wiki on how to beat there is no game, the old one. I need to turn this into my professor and wanted to add something extra but I want it so if I publish this the comment section isn't just a stupid gimmick.
I am trying to run the searchSQL query with the input from the searchbar after pressing the button. The 'sql' query runs on start.
When pressing the button it won't update the images according to the input from the search?
#using WebMatrix.Data
#{
var db = Database.Open("MTGDecks");
var sql = "SELECT * FROM Cards WHERE isPopular <> 0";
var searchSQL = "SELECT * FROM Cards WHERE cardName LIKE CONCAT ('%', #0, '%')";
var searchValue = Request.Form["searchBox"];
if (IsPost)
{
var searching = db.Query(searchSQL, searchValue);
}
var output = db.Query(sql);
}
<link href="~/Content/Site.css" rel="stylesheet" />
<h2>All Cards</h2>
<form method="post" action="/Home/Index">
<input type="text" name="searchBox" />
<button type="submit" class="btn">Search</button>
Make New Deck
<div class="row">
<div class="row justify-content-center">
#foreach (var row in output)
{
<div class="col-4">
<div class="card">
<img src="#row.imageURL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">#row.cardName</h5>
<p class="card-text">#row.oracleText</p>
Details
</div>
</div>
</div>
}
</div>
</div>
</form>
I'm unsure of what to do.
ok, going out on a limb here... your "button" is the href that redirects you to the details of the #row.cardID
In your code block you have it set up to do some stuff, but you never actually call it... If I were doing this in Blazor (razor syntax) the solution would be something like
#page "/myPage/{int: cardID}
HTML HERE
//Pseudocode, don't copy/paste
#code
{
public override void OnParametersSet ()
{
if (cardID != null)
Run The COde!!
}
}
So, basically, you're missing wiring up some kind of page event. There's a TON wrong with everything you're doing, but... hopefully this will get you to the next logical question.
I have various lists and inside those lists I've list of checkboxes and I've show more/less functionality.
Now, everything works fine but I want to convert some logic to one liner, tried various ways but didn't work so posting here.
Here is HTML part, and assume I have multiple lists like this.
<div id="list-special-needs">
<h4 class="filter-header">Special Needs</h4>
#foreach (var item in specialNeeds)
{
<div class="am-checkbox" style="padding: 3px 0;">
<input id="chk-special-needs-#item.ToLower()" name="special-needs" value="#item" type="checkbox" class="schedulerepeat-checkbox" onclick="return prepareSearchParams()" />
<label for="chk-special-needs-#item.ToLower()" class="margin-h-10 mobile-padding">#item</label>
</div>
}
<p onclick="return loadMore(this, 'list-special-needs', '#specialNeeds.Length')" class="show-more">Show more...</p>
</div>
<div class="clearfix"></div>
Js:
<script type="text/javascript">
PageEvent.add(PageEvent.AFTER_INIT, function () {
$("#list-services .am-checkbox").slice(5).hide();
$("#list-timing .am-checkbox").slice(5).hide();
$("#list-special-needs .am-checkbox").slice(5).hide();
$("#list-neighborhoods .am-checkbox").slice(5).hide();
});
function loadMore(element, listId, length) {
var listSelector = $(`#${listId} .am-checkbox`);
var isShowMore = $(element).text() == 'Show more...';
if (isShowMore) {
//..show more
$(element).text('Hide...');
listSelector.slice(0, length).slideDown();
} else {
//..hide
$(element).text('Show more...');
listSelector.slice(5).slideUp();
}
}
</script>
and I just want to convert this into one liner.
$("#list-services .am-checkbox").slice(5).hide();
$("#list-timing .am-checkbox").slice(5).hide();
$("#list-special-needs .am-checkbox").slice(5).hide();
$("#list-neighborhoods .am-checkbox").slice(5).hide();
Although I tried this, but it didn't work.
$("#list-services .am-checkbox, #list-timing .am-checkbox ..").slice(5).hide();
Any help would be really appreciated.
You should work with each one of them separately. So from your code:
$("#list-services .am-checkbox, #list-timing .am-checkbox ..").slice(5).hide();
We can take that and loop through and attack each one with
Array.from($("#list-services .am-checkbox, #list-timing .am-checkbox ..")).forEach(elem => {elem.slice(5).hide());
Although I'd suggest adding a class to each one of the blocks with te list-... IDs, so the code is nicer and go with:
Array.from($(".list-block .am-checkbox")).forEach(elem => {elem.slice(5).hide());
Create array of your elements with id's, then for each search for that same class and do stuff...
[...$("#list-services"), ...$("#list-timing"), ...$("#list-special-needs"), ...$("#list-neighborhoods")].forEach(el => {
$(el).find(".am-checkbox").slice(5).hide()
})
"need something more elegant"
Beauty is in eye of the beholder, is this one pretty enough?
[...document.querySelectorAll("#list-services, #list-timing, #list-special-needs, #list-neighborhoods")].forEach(el => $(el).find(".am-checkbox").slice(5).hide())
[...document.querySelectorAll("#list-services, #list-timing, #list-special-needs, #list-neighborhoods")].forEach(el => $(el).find(".am-checkbox").css("color", "red"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list-services">
<div class="am-checkbox">1</div>
</div>
<div id="list-timing">
<div class="am-checkbox">2</div>
</div>
<div id="list-special-needs">
<div class="am-checkbox">3</div>
</div>
<div id="list-neighborhoods">
<div class="am-checkbox">4</div>
</div>
This is what i'm trying to achieve.
section1 will be hidden at page load. When user clicks on Advanced, section1 should show & section2 should hide. On clicking Basic, the opposite should happen. Nothing happens when I click any of the anchor tags now. Where am i going wrong.
<div class="container" ng-init="advstatus=true">
Basic
<br/>
Advanced
<div class="section1" ng-hide="advstatus">
///...
</div>
<section ng-show="advstatus" class="section2">
///...
</section>
</div>
In AngularJS you need to use ng-click instead of onclick.
Also, ng-init isn't supposed to be used unless you're in ng-repeat, which you are not (take a look at the Docs).
You should set up the variable in your controller:
<div ng-app ng-controller="myCtrl" class="container" >
Basic
<br/>
Advanced
<div class="section1" ng-show="!advstatus">
Section 1
</div>
<section ng-show="advstatus" class="section2">
Section 2
</section>
</div>
Controller:
function myCtrl($scope) {
$scope.advstatus = true;
}
JS Fiddle
This one is easy to understand
<div class="section1" ng-show="state1">
Section 1
</div>
<div class="section2" ng-show="state2">
Section 2
</div>
<input type="button" value="Advance" ng-click="sec1_show()" />
<input type="button" value="Basic" ng-click="sec2_show()" />
<script>
function homecntrl($scope) {
$scope.state1 = false;
$scope.state2 = true;
$scope.sec1_show = function () {
$scope.state1 = true;
$scope.state2 = false;
};
$scope.sec2_show = function () {
$scope.state2 = true;
$scope.state1 = false
};
};
</script>
Very simple just do this:
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div ng-if="hideShow">hide and show content ...</div>
I have a problem with toggle on this list:
<div id="list">
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
... //and so on
</div>
I want clicked "#segment" to toggle child *"#segm_content"* and change img in "#opener".
I made it working with this code:
$('#segment').toggle(function() {
$('#opener').html('<img src="images/open.png"/>');
$('#segm_content').hide(500);
}, function() {
$('#opener').html('<img src="images/close.png"/>');
$('#segm_content').show(500);
});
But I can't figure out how to do it only for one "#segment" at a time.
This code toggles everything, which I don't want.
I am stuck at this point, any suggestions please?
Many thanks!
I really wouldn't recommend this. The point of an id is to reference a unique element. If you want to select multiple elements, you should define a class instead and have jQuery call that. Multiple ids is invalid HTML. But you could, per sé, do this by using changing your jQuery code to the following.
(Here is my jsFiddle: http://jsfiddle.net/KzVmK/)
$('[id="segment"]').toggle(
function(){
$(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
$(this).find('[id="segm_content"]').hide(500);
},
function(){
$(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
$(this).find('[id="segm_content"]').show(500);
}
);
Again, let me stress again that this is a bad idea, because you will not have unique id selectors in your document. This is really bad practice. There are times when you will want to select an individual element in the DOM and this will make that next to impossible. I would highly advise you to define a class for the elements (you can still define CSS classes, e.g. <div class="opener my-class" /> or <div class="segm_content my-class" />).
(Also, a helpful tip with this code: rather than populating the HTML elements with the same image that is also in the jQuery code [which is redundant], leave the <div id="opener" /> elements empty. Then, right after you define the toggle function, run the click event, like so: $('[id="$segment"]').toggle(...).click();
http://jsfiddle.net/XPXBv/).
General Theme Settings
Back-Ground Color
Text Color
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
<div class="options">
<table>
<tr>
<td><h4>Back-Ground Color</h4></td>
<td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
</tr>
<tr>
<td><h4>Text Color</h4></td>
<td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
</tr>
</table>
</div>
</div>
$(document).ready(function(){
$(".options").hide();
$(".SettingsTitle").click(function(e) {
var appThemePath = $("#appThemePath").text();
var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';
var elem = $(this).next('.options');
$('.options').not(elem).hide('fast');
$('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
elem.toggle('fast');
var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
$(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
});
});