I am looking to create a customizable product that you can change and see the visual changes on the site. I'm finding this hard to explain, so I apologize if you immediately know of a tutorial for this. I'm just at a loss of how to really explain this idea.
http: //bit. ly/L8DfF2
On the page it shows the product they sell, a custom xbox 360 controller, can someone point me in the right direct of how to create a custom product page with this idea.
Just glancing at the source it looks like obviously drop down lists with each option connected to a picture that changes a certain component of the product. But is there anything else more to it? I'm use to connecting listed or bulletined options to links, do I just simply connect it to the picture? Just not sure how to set up a product to display the updated options you can select is my biggest question.
Well it's the base image, and then on top of it is a stack of empty images. As you change the settings, each has some onChange listener, that changes the src or one of those empty images...thereby changing the overall stacked image.
Here is some sample code on the concept...in your implementation each select would adjust a different image (that represents just the relevant piece of the product):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#shell {width:100px;height:100px;display:block; background-color:#f00;}
#button {width:50px;height:50px;display:block; background-color:#00f;}
</style>
</head>
<body>
<div id="shell"><div id="button"></div></div>
Shell:
<select onChange="col('shell',this.value)">
<!-- in your version the values below would be file names of images -->
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
<option value="#00f">Blue</option>
</select><br/>
Button:
<select onChange="col('button', this.value)">
<!-- in your version the values below would be file names of images -->
<option value="#00f">Blue</option>
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
</select>
<script>
function col(part,x){
document.getElementById(part).style.backgroundColor=x;
//in yours, it would be document.getElementById(part).src=x;
}
</script>
</body>
</html>
Related
How do I make the html go back to previous page?
I do not want to do it via a button, just that when this html gets loaded, it should automatically go back to previous page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='refresh' content='0; URL='>
</head>
</html>
You have two options. JavaScript or HTML Meta Tags.
A JavaScript example would be
window.addEventListener('DOMContentLoaded', function() {
history.go(-1);
});
Or using HTML Meta Tags like this:
<meta http-equiv="refresh" content="2;url=http://example.net">
Hope it helps! Be aware that this behaviour is, generally, not expected by the user, and could cause confusion
You may wanna use the history.back() method that looks up at your history and send you back to the last visited website.
I have some Html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
</head>
<body>
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" class="password-input" name="pass">
</body>
</html>
that I am running on browser after ctrl+shift+i in inspecor I want to override some other code in complete body tag.
in above after I dont want to see this body tag code some override code i want see.
is this possible?
This is not possible.
Hide Javascript
If your concern is having a tidier HTML because Javascript code takes too much space, just <script src="externalFile.js"></script>
If your concern is you want to hide your code, because you don't want others to read it and understand it, you could minify and obfuscate the code, for example with UglifyJS. However the inspector can undo the minification by prettifying the code. Obfuscation however cannot be totally undone depending on techniques used.
Hide HTML
If this question is not about javascript and you want to reduce the number of html lines:
<object data="externalHTMLFile.html"></object>
or
<iframe src="externalHTMLFile.html"></iframe>
There are also other ways.
But you cannot simply hide some html from the inspector or remove the ability from the user to open the external HTML file and read all the HTML.
I know this question has been answered a million times over, over 2 decades or so however, I have legacy code (by that I mean old code that has been around for decades written in classic asp) and it uses a vbscript onload function and it works fine. However when I try to replicate (cut down version) myself it does not work can somebody direct me to the official answer. My code is in the same folder as the legacy code. I have also modified the legacy code and it still works so it cannot be caching.
I tried and all give me an error:
startup
startup;
startup()
startup();
vbscript:startup()
vbscript:startup();
I tried also, but no error but no result
vbscript::startup()
vbscript::startup();
My code:
<html>
<head>
<title>TEST</title>
<script language="vbscript">
Sub startup()
f1.browser.disabled = True
End Sub
</script>
</head>
<body onLoad="vbscript::startup()">
<form name="f1">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
If I change it to JavaScript it does work as everyone else seems to suggest however WHY DOES MY LEGACY CODE WORK!!!
Without submitting the hole page can someone suggest something.
Recently I have solved very similar problem and found on this reliable web site:
Specifying legacy document modes
following solution: using x-ua-compatible header.
<html>
<head>
<!-- Use Internet Explorer 9 Standards mode -->
<meta http-equiv="x-ua-compatible" content="IE=9">
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
This is the code I am using in chrome device mode select option list overflow the device width I don't no its coming in real devices and also I enclose my screenshot here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form role="form">
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
</div>
</form>
</div>
</body>
</html>
No, this will shown in your device. Option list item overflow this is because of OS (window). If you test this in other browser. It will perform diffident with default property (means if you don't customize with css or js).
And if you see this on android it will be okay and on iPhone then it will show with iphone default option box.
You didn't actually ask a question of any kind, just stating a fact of what Chrome does... I'm not sure how that fits in with this site, but anyway:
There's nothing wrong with your code, this is how the design mode behaves, in order to show the full length of options inside your dropdown.
On a real device, this will display either natively in iOS, or to the viewport width.
I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!
Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.
http://jsfiddle.net/MisterNeutron/Qk6U6/1/
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo by MisterNeutron</title>
<script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script type='text/javascript'>
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
</head>
<body>
<div>
<a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
<br><br>
<a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
</div>
</body>
</html>
I have used Dreamweavers menues to do give my site a dropdown list that I can then edit. Perhaps "open in new window" when you click the link will work. I have found that most clicks will default to open in the same window.