Is there any way to make a modal automatically scroll when a form field inside it is focused in order to center it? I think it would be useful when dealing with form in mobile devices with virtual keyboards
samedi 28 février 2015
How to create a Evony like map
I am currently working on a game very similar to Evony. I already know how to do pretty much everything except create the map for the game and the cords, if this make sense. Can aomeone guide me here?
I want ro make the game either in Html5 and javadcript or C
Thanks
Can I get the CSS and Javascript for my application in one HTTP request?
I've been using Rails to develop web sites/apps lately.
I really like their asset pipeline and how it compiles/minifies all of the css and javascript files for production in the css/javascript folders respectively.
I've heard/read in the past that http requests slow down the load time of websites (so naturally, it's best to make as few http requests as possible to reduce the load time of your website).
Is there a way to make rails output css and javascript files from one http request?
How to change window.location on modal open?
I have two modals: one is for login action and another one is for registration action.
In login modal there is a link "Not yet registered?" that opens a registration modal. And in registration modal there is a link "Already a member?" that opens a login modal.
When login modal is opened I want windows.location to be changed to /login and when registration modal is opened I want windows.location to be changed to /registration. And I want Back and Forward buttons of a browser work correctly, so that they change modals from /login to /registration back and forth.
1) What is the name of this functionality (if it has some standard name)?
2) Do famous frameworks like Bootstrap or http://ift.tt/1qucbz5 or others provide this functionality out of the box? Which one?
3) How can I create that functionality myself?
Iterating through image array using ng-repeat
I am trying to make the li's repeat for each image in the image array. Using the variable image as my identifier identifier but for some reason I am not able to loop through the array. I am making adjustments in the following line:
<li class="small-image pull-left thumbnail" ng-repeat="product in store.products.images" >
Please refer to the Plunker for the code.Here is my Plunker
Horizontal and Vertical Center within 100% CSS3's Viewport Height
I'm using the CSS3's Viewport Height to make a fullscreen section (height: 100vh). Unfortunately, I'm having trouble horizontally and vertically centering elements within a section. I'm attempting to have an image and bit of text within the first section appear in the center of the screen as a group. Thanks for the help!
HTML:
<section class="red-bg">
<div class="middle">
<img src="http://ift.tt/1EXkU5H" alt="" />
<h1>Some text here.</h1>
</div>
</section>
<section class="blue-bg">
<p>Another section here.</p>
</section>
CSS:
body {
color: #fff;
}
section {
width: 100%;
height: 100vh;
}
.middle {
/* needs to be vertically and horizontally aligned */
}
.red-bg {
background-color: #f00;
}
.blue-bg {
background-color: #00f;
}
Foundation navigation top-bar not working
I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.
So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.
I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.
My HTML file looks like this:
<!DOCTYPE html>
<html xmlns:th="http://ift.tt/wfNV60">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/foundation.min.css}" />
</head>
<body>
<nav class="top-bar" role="navigation" data-topbar="true">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><a href="#"><span th:text="#{menu.administration}"></span></a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#"><span th:text="#{menu.administration.material}"></span></a>
<ul class="dropdown">
<li><a href="#"><span th:text="#{menu.administration.ontology}"></span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<div>
<div class="large-12 columns">
<h2 th:text="#{material.search.title}"></h2>
</div>
</div>
<script th:href="@{/js/vendor/jquery.js}"></script>
<script th:href="@{/js/foundation.min.js}"></script>
<script th:href="@{/js/foundation/foundation.topbar.js}"></script>
<script th:href="@{/js/vendor/modernizr.js}"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
</body>
</html>
I'm sure my resources are being properly imported.
Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.
Am I doing something wrong?
Thank you so much for any help guys!
How to overlay a youtube video over your website
Hello I am trying to figure out how to do the follow
1.Click an image on a page
2.This will overlay a youtube video on top of your current page
3.Clicking any transparent part of the screen will return user back to said page
I have added a screenshot to help illustrate my scenario. Thank you for the help in advance, this is for a side project I am working on!! I guess I need more reputation before attaching an image so I have added a jing screenshot. http://ift.tt/1az3xyP
Html Live notification technologies
I would like to implement live notification functionality onto my website. When on the website, should the user receive an email, server stats exceeded certain parameters etc, and jquery notification box should appear on the users Webpage.
I have achieved this currently by using ajax and php on timers to query a mysql database however this is complety the wrong way to do this.
I have also written client - middleware - server programs in c# so am familiar with sockets, asynchronous callbacks etc.
What relevant technologies could I use for achieving functionality such as this?
Simple Angular JS application not showing up on browser
I created two pages index.html and app.js(Basically following the tutorial from here) , the contents of each of them are as follows:
index.html
<!DOCTYPE html>
<html ng-app ="store">
<head>
<link rel = "stylesheet" type="text/css" href="bootstrap/bootstrap.min.js"/>
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
<button ng-show ="store.product.canPurchase"> Add to cart </button>
</div>
<script type="text/javascript" src="angular-1.3.14/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function(){)
var app = angular.module('store',[]);
app.controller('StoreController',function() {
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:'. . .',
canPurchase: false
}
})();
For some reason, it's not actually printing the values on the web browser, here is what I am getting:
ng-model throwing error on input type number in angular 1.3
I have an input field which I want he user to input a number, so I have made an input field with type="number".
When I use it in 1.2 I get no errors
<script src="http://ift.tt/1yCFzY6"></script>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.person = [
{"name": "Alex","pts": "10"}
];
}]);
</script>
<div ng-app="app">
<div ng-controller="MainCtrl">
{{person | json }}<br>
name: <span ng-bind="person[0].name"></span></br>
<!-- pts: <input ng-model="person[0].pts"> -->
pts: <input type="number" ng-model="person[0].pts"><br?
</div>
</div>
However when I use it in 1.3 I get Error: [ngModel:numfmt] but when i update the number it still seems to get bound to the scope.
<script src="http://ift.tt/1DTrZWe"></script>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.person = [
{"name": "Alex","pts": "10"}
];
}]);
</script>
<div ng-app="app">
<div ng-controller="MainCtrl">
{{person | json }}<br>
name: <span ng-bind="person[0].name">
name: <span ng-bind="person[0].name"></span></br>
<!-- pts: <input ng-model="person[0].pts"> -->
pts: <input type="number" ng-model="person[0].pts">
</div>
</div>
Am I doing something wrong here or is this nothing to worry about? I would prefer not to have the errors in my console, when I am trying to debug other issues
Custom Search page with iframes / html5 possibly?
I am looking to build a custom webpage that will be loaded offline but will access external (rather internal company specific pages). We have several tools that access different analytics but each page has a search bar that ise used to search by "team". Is there a way that I can have a single page that will have and iframe that will load each page but not show the pages until a "tab" or button is clicked to show it within the iframe. The key would be to have it all loaded in the background and ready to go once clicked.
any possible way I can achieve this? I know that some js will be required but I am just not sure where to begin aside from an index.html.
Thanks for any suggestions or pointing me in the right direction!
Why is my HTML aside block adding a superfluous ending paragraph break?
I have this markup:
CSS
aside {
color: cornsilk;
font-family: 'Bookman Old School', Candara, Calibri, sans-serif;
}
HTML
<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">
Some criticize <cite>Huckleberry Finn</cite> because it uses "the N word." While it <em>is</em> an ugly word, that is the way many people spoke in the time and place represented by this novel.
<p>Should it be censored out, or replaced with another word?</p>
<p><cite>Huckleberry Finn</cite> has been criticized from the "git-go" for various reasons (and in fact, Twain rather rejoiced at this than fretted, knowing that calls for his book to be banned would actually draw more attention to it and increase sales).</p>
<p>Early on, some readers and reviewers were shocked, not by the novel's use of "the N word" (which they may not have considered objectionable or perhaps not even have really noticed, due to its ubiquitous usage throughout the country) but rather for its "low" subject matter and earthy humor, which was considered too crude and rough for "polite society" and sometimes for the very reason that Jim is portrayed sympathetically - as a real person with feelings and thoughts, and not as a minstrel show caricature.</p></aside>
As you can see here (or, if you're an HTML/CSS guru, perhaps previsualize), there is a superfluous line or paragrpah break at the end of the section of HTML shown above. The other "asides"/annotations do not exhibit that behavior.
What need I do to evict the trailing break?
Edit image with pixlr
I am trying to edit an image with the web app pixlr. They provide a web application that can be called using the api:
When I try the examples on their site, everything works fine. In their examples they just call the API by using the image url. In my example however, I would like to send the contents of an HTML5 canvas to the web app. This would be done by first getting the encoded data url from the canvas and then sending it to pixlr.
var imageData = imageElement.toDataUrl();
Now, with this approach we can not use the simple GET request to transmit it to pixlr, but we have to use the POST request to send it. This is described in their documentation:
in paramters:
Image : A URL to the image or the post raw data of the image to open
So I have this to send the image data to the web app:
$.ajax({
url: 'http://ift.tt/1po0dMk',
type: 'POST',
dataType: 'json',
headers : {
"content-type": "gzip"
},
data: {
image: imageData,
title:'screenshot',
service:'express'
}
}).error(function() {
alert('Could not reach pixlr app');
});
When I look at the console, this requests responds with a 200, but the web app does not open as expected. Does anybody know what I am doing wrong? Thanks.
Processing multiple forms on one page with PHP
I'm having issues with processing multiple forms that are contained in the same page. One of the forms is contained in a modal. This form works exactly how I want to and is placed in the code first.
The second form which is on the main contact page and placed underneath the modal is what is giving me problems. When I click the "submit" button nothing is happening. Once I comment out the modal, the other form works as expected.
I'm using a open source php document from www.tectite.com because I am not very skilled with php yet. The referenced php documents are the exact same thing. The document is called using hidden fields.
div element has a margin
I have built a content div with three further divs who have the
display:inline-block;
attribute. One of them contains another div element which has some audio controlls. The right div has a really big margin! Chrome and Firefox don't show any margins or paddings. If I delete the #music element, everything is okay.
Thanks for helping
Open all html links in one destination tab without creating multiple tabs
I have multiple links that when clicked opens a video file. Now, I know that if I want to open a video file in a new tab, I would have something like:
<a href="../video.jsp" target="_blank">Link to Video</a>
But I have multiple links and I do not want each one of the links to create a new tab separately. Instead, all the links should point to one destination tab i.e., When I click a first link, it should open the video file in a new tab, say "TabNew". Now, I click a different link, this link should refresh and load the new content in the "TabNew" tab instead of creating an other tab.
Is there any way to do this using HTML, or jQuery etc?
How to make a webpage display dynamic data in real time using Python?
I am working on making a GUI front end for a Python program using HTML and CSS (sort of similar to how a router is configured using a web browser). The program assigns values given by the user to variables and performs calculations with those variables, outputting the results. I have a few snags to work out:
How do I design the application so that the data is constantly updated, in real-time? I.e. the user does not need to hit a "calculate" button nor refresh the page to get the results. If the user changes the value in a field, all other are fields simultaneously updated, et cetera.
How can a value for a variable be fetched from an arbitrary location on the internet, and also constantly updated if/when it is updated at the source? A few of the variables in the program are based on current market conditions (e.g. the current price of gold). I would like to make those values be automatically entered after retrieving them from certain sources that, let us assume, do not have APIs.
How do I build the application to display via HTML and CSS? Considering Python cannot be implemented like PHP, I am seeking a way to "bridge the gap" between HTML and Python, without such a "heavy" framework like Django, so that I can run Python code on the server-side for the webpage.
I have been looking into this for a quite some time now, and have found a wide range of what seem to be solutions, or that are nearly solutions but not quite. I am having trouble picking what I need specifically for my application. These are my best findings:
Werkzeug - I believe Werkzeug is the best lead I have found for putting the application together with HTML and Python. I would just like to be reassured that I am understanding what it is correctly and that is, in fact, a solution for what I am trying to do.
WebSockets - For displaying the live data from an arbitrary website, I believe I could use this protocol. But I am not sure how I would implement this in practice. I.e. I do not understand how to target the value, and then continuously send it to my application. I believe this to be called scraping?
How to use onpopstate, with javascript, no jQuery?
I have a website that has 4 main pages, index, somepage, someotherPage, and LastOtherpage. They have different names, like index.php, food_and_health.php, enlightening_info.php, and about_us.php.
I have my ajax part(HTTPrequest) working fine, and the pushstate is working.
What I now want, is obviously, the popstate function working. I have read, and watched tutorials, but how would I do this with the this keyword?
I have a fiddle added, so you can see me code, its not working well in the fiddle, but works very good in chrome, firefox and late ie. I have something like this in mind for my onpopstate..
nav.history("this.object", "Title", "/this.url");
http://ift.tt/1AGAfrP
How would the onpopstate code look like? I know it is bad to ask for all the code, but this way I actually learn, as when I read the code, I understand it. I haven't fully got the grip of javascript eventhandling yet, as you can see I use onclick in my html documentes, and not eventhandling them. But this I know, I can do, it is just a lot of changing in my documents, and first priority for me, would be to have back/forward, refresh, and share functionality to work, so that I can actually share my website out in the web, without and lack of functionality! :)
Any help is much appreciated, thanks in advance :)
First time building interactive floor map
I have a interesting task of building an interactive map for a family attraction company on their site. The idea is that people can click on a activity and it will show up on the map where it is located with some info in the dialog box. Also their has to be a option that people can click directly on the map on a building and that is show the same box with content in it.
This is new to me and I would like to have some one who can point me in the right direction on how I can build this or tools who can help me with this. I have look around and see a lot about HTML5 canvas but I was thinking if their a other way ( easy way ) for a beginner to build a interactive floor map.
Thanks all for your help.
How do i make bootstrap Navbars Non responsive
So Im in the middle of designing this website for a client. Its a social network based around joomla. and I have included bootstrap css and js The nav bars fixed at the top are at responding well but when it comes to smaller devices it is making taking up too much space and overlapping the content in the body of the site. How do i make this navbar stay one size and all the way across the top of the page for all devices?
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="no-collapse">
<div class="col-xs-1 col-md-1">
<center><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" height="50" width="50" class="img-responsive" /></center>
</div>
<div class="col-xs-9 col-md-8">
<!--Menu Module-->
<center><jdoc:include type="Modules" name="newmenu" style="none" /></center>
</div>
<div class="col-xs-2 col-md-2">
<!--Menu Module-->
<center><jdoc:include type="Modules" name="mysearchbar" style="none" /></center>
</div>
</div>
</nav>
HTML5: additional chars in input with type="number" extending mobile keyboards
In our app, we have many inputs that are used to fill in school grades. Till now we had
<input type="text" name="mark">
As we're trying to use new features of HTML5, we changed it to
<input type="number" name="mark">
so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.
Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?
EDIT:
Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.
Another EDIT:
Is there any markup i can add, that let's mobile users to easily switch between keyboard layouts? That should be enough.
WEBRTC remote video stops streaming after 2 seconds
I am facing a very weird behavior with this WEBRTC peer to peer app. the app would stream audio form one peer to the other, but when it comes to stream video, it actually stream video but just for the first 2 seconds, then it would stop streaming video, but the audio continues to stream. Here is some of the code that handles the remote video:
var webrtc_capable = true;
var rtc_peer_connection = null;
var rtc_session_description = null;
var get_user_media = null;
var connect_stream_to_src = null;
var stun_server = null;
if (navigator.getUserMedia) {
rtc_peer_connection = RTCPeerConnection;
rtc_session_description = RTCSessionDescription;
get_user_media = navigator.getUserMedia.bind(navigator);
connect_stream_to_src = function(media_stream, media_element) {
media_element.srcObject = window.URL.createObjectURL(media_stream);
media_element.play();
};
} else if (navigator.mozGetUserMedia) {
rtc_peer_connection = mozRTCPeerConnection;
rtc_session_description = mozRTCSessionDescription;
get_user_media = navigator.mozGetUserMedia.bind(navigator);
connect_stream_to_src = function(media_stream, media_element) {
media_element.srcObject = window.URL.createObjectURL(media_stream);
media_element.play();
};
stun_server = null;
} else if (navigator.webkitGetUserMedia) {
rtc_peer_connection = webkitRTCPeerConnection;
rtc_session_description = RTCSessionDescription;
get_user_media = navigator.webkitGetUserMedia.bind(navigator);
connect_stream_to_src = function(media_stream, media_element) {
media_element.src = webkitURL.createObjectURL(media_stream);
};
} else {
alert("This browser does not support WebRTC - visit WebRTC.org for more info");
webrtc_capable = false;
}
</script>
<script>
var call_token;
var signaling_server;
var peer_connection;
function start() {
// create the WebRTC peer connection object
peer_connection = new rtc_peer_connection({
"iceServers": [ // information about ice servers
{ "url": "stun:"+stun_server },
]
});
// generic handler that sends any ice candidates to the other peer
peer_connection.onicecandidate = function (ice_event) {
console.log(ice_event.candidate);
if (ice_event.candidate){
console.log("true");
}
if (ice_event.candidate) {
signaling_server.send(
JSON.stringify({
token:call_token,
type: "new_ice_candidate",
candidate: ice_event.candidate ,
})
);
}
};
peer_connection.onaddstream = function (event) {
var video = document.querySelector("#remote_video");
video.src = webkitURL.createObjectURL(event.stream);
document.getElementById("loading_state").style.display = "none";
document.getElementById("open_call_state").style.display = "block";
};
setup_video();
signaling_server = new WebSocket("ws://localhost:1234");
if (document.location.hash === "" || document.location.hash === undefined) {
var token = Date.now()+"-"+Math.round(Math.random()*10000);
call_token = "#"+token;
document.location.hash = token;
signaling_server.onopen = function() {
signaling_server.onmessage = caller_signal_handler;
signaling_server.send(
JSON.stringify({
token:call_token,
type:"join",
})
);
}
document.title = "You are the Caller";
document.getElementById("loading_state").innerHTML = "Ready for a call...ask your friend to visit:<br/><br/>"+document.location;
} else { // you have a hash fragment so you must be the Callee
// get the unique token for this call from location.hash
call_token = document.location.hash;
signaling_server.onopen = function() {
// setup caller signal handler
signaling_server.onmessage = callee_signal_handler;
// tell the signaling server you have joined the call
signaling_server.send(
JSON.stringify({
token:call_token,
type:"join",
})
);
// let the caller know you have arrived so they can start the call
signaling_server.send(
JSON.stringify({
token:call_token,
type:"callee_arrived",
})
);
}
document.title = "You are the Callee";
document.getElementById("loading_state").innerHTML = "One moment please...connecting your call...";
}
// setup message bar handlers
document.getElementById("message_input").onkeydown = send_chat_message;
document.getElementById("message_input").onfocus = function() { this.value = ""; }
}
// handler to process new descriptions
function new_description_created(description) {
peer_connection.setLocalDescription(
description,
function () {
signaling_server.send(
JSON.stringify({
token:call_token,
type:"new_description",
sdp:description
})
);
},
log_error
);
}
// handle signals as a caller
function caller_signal_handler(event) {
var signal = JSON.parse(event.data);
if (signal.type === "callee_arrived") {
peer_connection.createOffer(
new_description_created,
log_error
);
} else if (signal.type === "new_ice_candidate") {
peer_connection.addIceCandidate(new RTCIceCandidate(signal.candidate));
} else if (signal.type === "new_description") {
peer_connection.setRemoteDescription(
new rtc_session_description(signal.sdp),
function () {
if (peer_connection.remoteDescription.type == "answer") {
peer_connection.createOffer(new_description_created, log_error);
}
},
log_error
);
} else if (signal.type === "new_chat_message") {
add_chat_message(signal);
} else {
// extend with your own signal types here
}
}
// handle signals as a callee
function callee_signal_handler(event) {
var signal = JSON.parse(event.data);
if (signal.type === "new_ice_candidate") {
peer_connection.addIceCandidate(
new RTCIceCandidate(signal.candidate)
);
} else if (signal.type === "new_description") {
peer_connection.setRemoteDescription(
new rtc_session_description(signal.sdp),
function () {
if (peer_connection.remoteDescription.type == "offer") {
peer_connection.createAnswer(new_description_created, log_error);
}
},
log_error
);
} else if (signal.type === "new_chat_message") {
add_chat_message(signal);
} else {
// extend with your own signal types here
}
}
// add new chat message to messages list
function add_chat_message(signal) {
var messages = document.getElementById("messages");
var user = signal.user || "them";
messages.innerHTML = user+": "+signal.message+"<br/>\n"+messages.innerHTML;
}
// send new chat message to the other browser
function send_chat_message(e) {
if (e.keyCode == 13) {
var new_message = this.value;
this.value = "";
signaling_server.send(
JSON.stringify({
token:call_token,
type: "new_chat_message",
message: new_message
})
);
add_chat_message({ user: "you", message: new_message });
}
}
// setup stream from the local camera
function setup_video() {
get_user_media(
{
"audio": true, // request access to local microphone
"video": true // request access to local camera
},
function (local_stream) {
<video> MediaElement
connect_stream_to_src(local_stream, document.getElementById("local_video"));
peer_connection.addStream(local_stream);
},
log_error
);
}
function log_error(error) {
console.log(error);
}
</script>
Additional Info:
- Windows 8 x64
- opera version is 27.0.1689.76
- Localvideo plays fine
- This call is between two peers on the same network(no nat traversal)
Uploading image files and php not registering any inputs [on hold]
I have a fairly simple HTML form with a file input and I'm trying to post it to a block of PHP code.
I use this same method in other places on my website and it works perfectly, there must be some very basic (probably embarrassing) thing I'm overlooking or don't understand.
**I have a functioning method call (upload_image) and that method works, that's not the issue. The issue is in the html form being read by the php code above it.
HTML & PHP:
<?php
echo 'It reads to this point';
if(empty($_FILES['aca']))
print_r("Damn");
if(isset($_FILES['aca']) === true)
{
echo 'something';
if(empty($_FILES['aca']['name']) === true)
{
echo 'Please choose a file! <br>';
}
else
{
$allowed = array('jpg', 'jpeg', 'gif', 'png');
$file_name = $_FILES['aca']['name'];
$file_extn = strtolower(end(explode('.', $file_name)));
$file_temp = $_FILES['aca']['tmp_name'];
echo '<br>';
echo '<br>';
print_r($_FILES['aca']['tmp_name']);
echo '<br>';
echo '<br>';
if(in_array($file_extn, $allowed) === true) {
upload_image($file_temp,$file_extn);
echo 'You have uploaded a picture!';
echo '<b><h3>Press submit again to finish the upload</h3></b>';
//echo "<script>window.top.location='../hidden/viewPNM.php?id=$permi'</script>";
}
else
{
echo 'Incorrect File Type!! <br> Allowed: ';
echo implode(', ', $allowed);
}
}
}
?>
<form action="" method="post" id="aca" enctype="multipart/form-data">
<input type="file" id="aca" name="aca"> <input type="submit">
</form>
Make jquery Load new HTML tag
HTML
<button onClick="a()">add box</button>
Js
function a(){return"
"}
$("#eid").keyup(function(){...});
Question Jquery dose not find $(#eid"). How do I tell it I just created the text box. So recognise it.
How can I vertically and center 3 buttons on my mobile site?
I am working out of wordpress. I have 3 buttons i would like to place on my mobile site. I would like for these buttons to be centered vertically in the middle of the page.
I don't really know how write this code the proper way , nor the css.
I want them to have a decent amount of space , so they wont be touching one another either.
Can anyone give me an example and the best way to code 3 buttons in html and be centered vertically in css?
Window, DOM and jQuery mocks for Web Worker
I am using a third party library that in turn uses mxGraph, jQuery and ext-js. This library has two modules,
- UI (This is where the above listed libraries are used)
- A processing engine (this is free of above libraries)
I want to run the processing engine on a web worker via the APIs exposed by the library. The issue is that library code is not segregated into separate files. So I tried importing all the files using importScriptin the web worker but naturally it fails since the web worker does not have access to document, window, jquery etc.
Are you guys aware of mock APIs for window, document etc which I can use in my web worker so that my importScript call can pass successfully and then I can run the process safely since the code that gets executed here does not use window or document.
Thanks,
Transition effect not working jquery
i'm creating a navbar and i'm changing the font size of a brand when scroll top is greater than 10 as you can see below . i just wanna make brand font size small or bigger smoothly. just like transitions in css3 . is there any efficient way of doing that???
var a = $(".navbar-default").offset().top;
$(document).on('scroll', function() {
if ($(this).scrollTop() > 10) {
$('.navbar-default').addClass("scrolled");
$('.navbar-brand').css({"font-size":"20px"});
} else {
$('.navbar-default').removeClass("scrolled");
$('.navbar-brand').css({"font-size":"26px"});
}
});
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand-font-size navbar-brand scroll" href="#home">Shopify</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav text-center" style="position:relative;left:300px;">
<li><a class="scroll" href="#about">Home</a></li>
<li><a class="scroll" href="#portfolio">Accessories</a></li>
<li><a class="scroll" href="#clients">Men</a></li>
<li><a class="scroll" href="#team">Women</a></li>
<li><a class="scroll" href="#blog">FAQ's</a></li>
<li><a class="scroll" href="#contact">Order Now</a></li>
</ul>
<ul class="nav navbar-nav navbar-right icons">
<li class="icon-border"><a href="#"><i class="fa fa-search icons-size"></i></a></li>
<li class="icon-border"><a href="#"><i class="fa fa-shopping-cart icons-size"></i></a></li>
<li class="icon-border"><a href="#"><i class="fa fa-align-justify icons-size"></i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Mobile HTML5 Forms: Input bug
I've made an webform on my website which is responsive, and working on my OnePlus One. However, I am getting some bug reports of it because people (mostly: iPhones, Samsung Galaxy S4 or earlier versions, all on standard web browsers, even some web browsers on iOS) can't enter text in the input fields. I've got a report where the person can focus on an input box (type: email), but when he types something, it will appear as text in the URL Box of the browser. All the iPhone users just can't focus, or type text in the boxes.
Here is my HTML Form:
<form method='post' name='login-form'>
<fieldset>
<legend>Login</legend>
<div class="controll">
<input type="email" id="email" name="email" placeholder="E-Mail" required />
</div>
<div class="controll">
<input type="password" id="password" name="password" placeholder="Password" required />
</div>
<div class="controll buttons">
<div class='noacc'>Don't have an account yet? <a href='/register'>Register</a>!</div>
<input type='submit' name='submit' value="Sign in" />
</div>
</fieldset>
</form>
And some CSS (Not all, because it is spread all over the stylesheet)
input, select {
color: rgba(61,60,62,1);
font-family: 'robotoregular';
font-size: 1.15em;
border: 1px solid rgba(255,107,67,0.75);
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: inline-block;
padding: 0.6em 0.6em;
}
CSS - Drop down menu appearing outside UL
I am creating a drop down menu using CSS. However when I select the menu it selects in the space that the List will appear and from the UL. Not just the UL if that makes sense and i cannot work out why it does that. Please see the code for the example:-
The CSS:-
#navigation .menu ul {position:absolute; top:45px; left:0px; opacity:0; background:black; transition:opacity .25s ease; -webkit-transition:opacity .25s ease;}
#navigation .menu li:hover > ul {opacity:1; margin:0;}
#navigation .menu ul li {height:25px; width:200px; overflow:hidden; border-bottom:red 1px solid; border-left:none; margin:none; transition:opacity .25s ease; -webkit-transition:height .25s ease;}
#navigation .menu ul li:hover {overflow:hidden; margin:0;}
#navigation .menu ul li a {text-decoration:none; height:25px; width:200px;}
#navigation .menu ul li:last-child {border-bottom:none;}
HTML code:-
<div id="navigation"> <nav> <ul class="menu">
<li> <a href="Option.html"> <h1> Homepage </h1> </a> </li>
<li> <a href="Option2.html"> About </a> <ul class="ulbox">
<li class="dm"> <a href="Option1.html"> <img src="images/Avengers.jpeg" width="25" /> The Site </a></li>
<li class="dm"> <a href="Option2.html"> <img src="images/Doctor Strange.jpeg" width="25" /> Find Us </a></li>
<li class="dm"> <a href="Option3.html"> <img src="images/Guardians.jpeg" width="25" /> The Company </a></li>
<li class="dm"> <a href="Option4.html"> <img src="images/Inhumans.jpeg" width="25" /> Contrived Page </a></li>
<li class="dm"> <a href="Option5.html"> <img src="images/Thor.jpeg" width="25" /> Drop Down Success </a></li>
</ul> </li>
<li> <a href="Option3.html"> Images </a> <ul>
<li> <a href="Option1.html"> The Site </a></li>
<li> <a href="Option2.html"> Find Us </a></li>
<li> <a href="Option3.html"> The Company </a></li>
<li> <a href="Option4.html"> Contrived Page </a></li>
<li> <a href="Option5.html"> Drop Down Success </a></li>
</ul> </li>
<li> <a href="Option4.html"> The next page </a> <ul>
<li> <a href="Option1.html"> The Site </a></li>
<li> <a href="Option2.html"> Find Us </a></li>
<li> <a href="Option3.html"> The Company </a></li>
<li> <a href="Option4.html"> Contrived Page </a></li>
<li> <a href="Option5.html"> Drop Down Success </a></li>
</ul> </li>
<li> <a href="Option5.html"> Terms and Stuff </a> <ul>
<li> <a href="Option1.html"> The Site </a></li>
<li> <a href="Option2.html"> Find Us </a></li>
<li> <a href="Option3.html"> The Company </a></li>
<li> <a href="Option4.html"> Contrived Page </a></li>
<li> <a href="Option5.html"> Drop Down Success </a></li>
</ul> </li> </ul> </nav> </div>
I can't see why the menu is showing from outside the UL nav bar. Can someone help?
ARIA attributes for reading different text than in the HTML document
In my HTML document I am using roman numbers (e.g.: MMXV = 2015).
Is there a way to inform screen readers to interpret certain text in another way (e.g.: roman numerals as "Two thousand and fifteen" instead of M-M-X-V)?
My guess was that there would be an ARIA attribute, but I cannot seem to find one. E.g.:
<time datetime="2015" aria-?="Two thousand and fifteen">MMXV</time>
Unable to Pass Values from One PHP Page to Another
There is similar code in the application that works in this same fashion, but my addition is not working. I can get the search page to pop-up in a new window, but when I select the group to pass to the form page and display the pop-up window will not close or populate the form field on the add form page. Any help would be appreciated.
ADD Form PHP Page Want to hide a readonly form field for a group name and display a button to search group listing from another page.
Form Field Page HTML Code
<div class="form-group">
<label class="col-sm-3 control-label" for="groupId">Group *</label>
<div class="col-sm-6" id="div_gr_name" style="<?php if ($gr_id < 1) {?> display:none <?php } else { ?> display:inline <?php } ?>">>
<input type='text' name='gr_name' class='span2 form-control' placeholder="Search Group Name" value="<?php if ($gr_id != -1) {echo $gr_name;} else {echo '';} ?>" id='gr_name' readonly='true' required/>
</div>
<div class="col-sm-2" style = "<?php if ($gr_id > 1) {?> display:none <?php } else { ?> display:inline <?php } ?>">
<button type="button" class="btn btn-primary" onclick='OpenPopup()'>Search</button>
</div>
<div>
<span id='paientNameMissing'></span>
</div>
</div>
Javascript OpenPopup from footer page
function OpenPopup() {
try {
window.open("searchgroup.php", "_blank", "width=850,height=500,scrollbars=yes,resizable=yes");
}
catch (ex) {
alert(ex);
}
finally {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
Searchgroup Selection PHP Page
Group Selection Page PHP & HTML Code
//retrieve our table contents
while($row=mysql_fetch_array($rs)){
extract($row);
//creating new table row per record
echo "<tr>
<td>{$gr_name}</td>
<td>{$gr_leadername}</td>
<td>{$gr_leadcontact}</td>
<td>{$gr_leademail}</td>
<td>";?><a href='#' onclick="select_group('<?php echo $gr_id ?>', '<?php echo mysql_real_escape_string($gr_name); ?>') ">Select</a><?php echo "</td>
</tr>";
}
//end table
echo "</tbody>
</table>
</div>";
}
Select Group javascript function
function select_group( id, name ){
var selvalue = id;
var selvalue1 = name;
window.opener.document.getElementById('gr_id').value = selvalue;
window.opener.document.getElementById('gr_name').value = selvalue1;
if (id!=0) {
window.opener.document.getElementById('div_gr_name').style.display = "inline";
}
else {
window.opener.document.getElementById('div_gr_name').style.display = "none";
}
window.close();
}
How to access popstate title
The history.pushstate event takes 3 arguments:
history.pushstate(data, title, url)
Using popstate I can access the data argument and the url is updated in the url bar but how can I access the title argument to be able to update the page title?
Thanks in advance
Font-Size changes on mobile device
I'm creating a website for a Uni project and during my testing i've come across a problem with my font-size, but only on certain pages of my site when looking on a mobile device.
Homepage and Content pages don't seem to reduce for the screen size, whereas the contact page works correctly.
It's only linked to one CSS file and all pages are using the same tags for the typography.
Any help would be much appreciated.
My CSS is as below:
h1 {
color: #848da8;
font-family: 'Metamorphous', jones, sans-serif;
font-size: 40px;
font-size: 2.5rem;
margin-top: 10px;
padding: 20px 5px 5px 5px;
text-align: center;
}
h1.logo {
margin-top: 10px;
text-align: left;
}
h2 {
font-weight: 600;
margin-top: 10px;
}
h3 {
font-size: 16px;
color: #000;
font-weight: 400;
}
h4 {
background-color: #848da8;
color: #fff;
font-weight: 400;
font-size: 17px;
font-size: 1.1rem;
padding: 10px 0px 10px 0;
}
p {
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 14px;
font-size: 0.9rem;
letter-spacing: -0.5px;
padding: 10px;
}
Google Plus icon not showing - “Display forbidden by X-Frame-Options”
I've been trying to add a google plus icon to my webpage but I haven't been able to make it work. I use HTML5 and I have tried doing this:
I added the following <script> before the </body>
<script src="http://ift.tt/xnjN8S"></script>
and this in the place I want it to be shown.
<g:plusone size="tall" count="true"></g:plusone>
but I get the following error
Refused to display 'http://ift.tt/1E0qSnV…refresh&id=I0_1425069928860&parent=file%3A%2F%2F&pfname=&rpctoken=36362517' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I also checked this question but the &output=embed solution isn't working for me.
I was able to use the facebook and twitter share using iframe but I can't find an example for doing the same for the google +1.
NOTE: The page I'm making is part of an assignment and it's not supposed to be online until after the deadline. I don't know if the problem is because the page is still local on my computer.
Need to develop a Web page to run on my mobile
I have created an HTML page on my PC and I need to run it in my mobile for testing. I have deployed it in TOMCAT and I run it using http://IP ADDRESS (192.something.something.something):port/index.html
I can't access it outside my home network. I want to know do I need to add something to make it run outside my home network on other mobile phones..? I am confused.. Everything is new for me. Will appreciate any help. Thanks
How to make chicago-ctos.com-like dots animation in background?
I was on searching design inspiration, and i found this website: http://ift.tt/1g9xN3Z as you see there is dots and connecting lines animation in the background.
Can you explain to me how to make that?
Stacked tabs in dropdown menu in navbar
What i am creating is similar to this. I found this while researching on stackexchange.
However, i want the dropdown to open on mouseover. I am able to create a bootstrap navbar with mouseover dropdowns, but unable to add mouseover action to the example given above. Any ideas?
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a> </li>
<li><a data-target="#profile" data-toggle="tab">Profile</a></li>
<li><a data-target="#messages" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
Regards Anitha
Post data to URL and include session data
In writing a test for a php script, I want to send the tested script post data and also have it receive the $_SESSION data from the sending php test script.
Peter and Burak both showed a way to send the post data in POST data to URL php One used curl and the other html5.
Using either of the two solutions, I get the $_POST data in the tested script, but not the $_SESSION data from the sending php script.
I have tried dozens of suggestions found online, but I never get the session data using those suggestions.
Help would be appreciated.
HTML audio tag on IPhone is half size
When I add audio tag to html and try to see it on IPhone 5 it has only half the size. How do I fix it?
<!DOCTYPE html>
<html>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
If I zoom in then it works. But not in the normal screen.
Wrong:
Expected:
If I add
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also show up properly but would become half height once zoomed out.
want to create dynamic html table in asp.net c#?
I am beginner in asp.net.I want to create dynamic html table for view data data come from database created in sql server.I fetch data from database and convert it in data set. Now i don't know how to display this data in html table.Each time numbers of data rows are different so i want to create dynamic html table according to data row each time.I need help.
HTML5 input list features
I recently stumbled upon the HTML 5 <input list='myDataListName /> which can be used with a <datalist /> to perform "out of the box" auto-complete functionality, with no javascript required. Pretty cool!
Are there any other advanced configuration options within HTML5 for this new <input list="x"> type that are supported?
I know all of these options are possible using JavaScript even before this new HTML5 feature, but the new feature seems a little lacking without some of these options.
For example:
- Sub string auto-complete. (type "Lastname" and find "Firstname Lastname" item)
- Start matching only after first x characters are typed
- Require selection of an item from the datalist
- Tab to select first item
- Server side callbacks the retrieve sub-set results for large lists
Example of HTML5 input list:
<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>
vendredi 27 février 2015
Web Page Not Printing with Preset Dimensions
Please I have the following CSS Code listing
<style type="text/css">
.idbg {
min-width: 675px;
width: 675px;
min-height: 976px;
height: 976px;
border: 2px solid;
border-radius: 2px;
border-color: black;
overflow: hidden;
}
.colored {
color: orangered;
text-transform: capitalize;
text-align: left;
font-weight: bold;
font-size: large;
}
.coloredinverse {
color: black;
text-transform: capitalize;
text-align: left;
text-decoration: underline;
font-weight: bold;
font-size: large;
}
.idbg .row {
margin-right: 15px;
margin-left: 17px;
}
.col-xs-9 {
position: relative;
min-height: 1px;
}
Used In A web page Like So
<div class="row">
@Html.Partial("_zoneAdminPartial")
<div class="col-xs-9">
@Html.Partial("_validationSummary")
<div class="idbg">
<div>
<img class="pull-right" src="~/images/badge_header.png" />
</div>
<div class="row col-xs-12" style="display: table-cell; vertical-align: middle; text-align: center; margin-top: 70px; margin-bottom: 70px; margin-left: -10px;">
<img src="@Model.Photograph.imagePath" style="width: 300px; height: 300px;"/>
</div>
<div class="row" style="margin-top: 25px; margin-bottom: 25px; padding-top: 10px; padding-bottom: 10px;">
<div class="col-xs-12" style="background-color: lightcyan; border: 2px solid; border-radius: 10px; border-color: lightcyan;">
<div class="padding-y-10">
<div class="colored col-xs-4">
Full Name
</div>
<div class="coloredinverse col-xs-8">
@Model.Title @Model.FirstName @Model.LastName
</div>
</div>
<br/>
@if (Model.EducationalInfornation != null)
{
<div class="padding-y-10">
<div class="colored col-xs-4">Zone:</div>
<div class="coloredinverse col-xs-8">@Model.EducationalInfornation.Zone</div>
</div>
<br/>
<div class="padding-y-10">
<div class="colored col-xs-4">Chapter:</div>
<div class="coloredinverse col-xs-8">@Model.EducationalInfornation.Chapter</div>
</div>
<br/>
}
else if (Model.ParticipantSchoolInformation != null)
{
<div class="padding-y-10">
<div class="colored col-xs-4 ">Zone:</div>
<div class="coloredinverse col-xs-8">@Model.ParticipantSchoolInformation.Zone</div>
</div>
<br/>
<div class="padding-y-10">
<div class="colored col-xs-4">Chapter:</div>
<div class="coloredinverse col-xs-8">@Model.ParticipantSchoolInformation.Chapter</div>
</div>
<br/>
}
<div class="padding-y-10">
<div class="colored col-xs-4">Designation:</div>
<div class="coloredinverse col-xs-8">@Model.Designation</div>
</div>
<br/>
<div class="padding-y-10">
<div class="colored col-xs-4">Badge Id:</div>
<div class="coloredinverse col-xs-8"><span class="label label-info">@Model.UniqueRegistrationNumber</span></div>
</div>
</div>
</div>
<div class="padding-y-10 margin-t-20">
<img class="pull-right" style="height: 40px; width: 100%; margin-top: 30px;" src="~/images/badge_footer.png" />
</div>
</div>
</div>
</div>
Now WHAT I want to achieve is The printable portion of the page will have the exact dimensions 675px x 976 px when printing
The page displays fine when viewed on a webpage all dimensions are maintained but when printed the portion of page printed (div with class idbg and all its contents) fills up the Paper and dimensions are ignored
Please Is there a way around this problem
Regards
How to overcome weird "placeholder" issue in mobile Safari
I'm facing a very weird bug on my website, a bug that only surfaces in mobile Safari (tested on iPhone5, iOS8.1). Below are a few links to live pages where each page has a search input control:
http://ift.tt/1E0w1MN
http://ift.tt/1DAIiGv
http://ift.tt/1E0w0ID
The weird behavior is that when using mobile Safari, after typing 2 or 3 characters the background of the parent element as well as the input control itself dissapear. All that remains is the cursor itself.
Here's the markup of the input control of the first example:
<input type="text" name="q" id="q" autocomplete="off" placeholder="- search the jungle -" value="" class="searchfield" />
I've been stripping away attributes, changing names, etc of that input box until I figured out what triggered it. It turns out it is the placeholder attribute. When I remove it, the issue is gone.
I've been looking online for known problems with placeholder attributes in mobile Safari, but I've found nobody with this weird issue. I am there suspecting that it is using placeholder in combination with some other thing to trigger this bug.
Of course an easy solution would be to remove placeholder text altogether, but I find that solution to be too brute force for now, and I'm really curious what this bug is about.
Placing text and slideshow side-by-side in a box
I'm trying to place a slideshow side-by-side of text, with the slideshow to the right, and contain it all within a box. I thought I got it right at first, by simply containing it in a table with text in one column and the slideshow in the other, but as soon as I finished coding the slideshow, it refuses to stay within the parameters of the box - I've tried using section, aside, article, or the basic div elements as well and I just can't get it to work.
This is my html:
<table class="main">
<tr>
<th>
...random text here...
</th>
<td>
<div class="slideshow">
<figure>
<img src="Pics/slide show/1.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/2.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/3.gif" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/4.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/5.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/6.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/7.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/8.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/9.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/10.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/11.png" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/12.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/13.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/14.png" style="width:500px;height:500px;" />
</figure>
</div>
</td>
</tr>
</table>
And this is my css:
table.main {
background-color:#fff;
margin:20px;
padding:20px;
border:5px solid black;
text-align:center;
font-family:"Fredericka the Great";
display:div;
}
table.main th, td {
padding:20px;
margin:20px;
}
table.main th {
padding:40px;
margin:50px;
font-size:25px;
}
.slideshow{
position:relative;
max-width:500px;
height:500px;
}
.slideshow figure{
margin:0;
position:absolute;
opacity:0;
}
figure:nth-child(1){
animation: xfade 42s 39s infinite;
}
figure:nth-child(2){
animation: xfade 78s 72s infinite;
}
figure:nth-child(3){
animation: xfade 78s 66s infinite;
}
figure:nth-child(4){
animation: xfade 78s 60s infinite;
}
figure:nth-child(5){
animation: xfade 78s 54s infinite;
}
figure:nth-child(6){
animation: xfade 78s 48s infinite;
}
figure:nth-child(7){
animation: xfade 78s 42s infinite;
}
figure:nth-child(8){
animation: xfade 78s 36s infinite;
}
figure:nth-child(9){
animation: xfade 78s 30s infinite;
}
figure:nth-child(10){
animation: xfade 78s 24s infinite;
}
figure:nth-child(11){
animation: xfade 78s 18s infinite;
}
figure:nth-child(12){
animation: xfade 78s 12s infinite;
}
figure:nth-child(13){
animation: xfade 78s 6s infinite;
}
figure:nth-child(14){
animation: xfade 78s 0s infinite;
}
@keyframes xfade{
0%{
opacity:1;
}
4.5%{
opacity:1;
}
7.15%{
opacity:0;
}
95%{
opacity:0;
}
100%{
opacity:1;
}
}
Google Plus icon not showing - “Display forbidden by X-Frame-Options”
I've been trying to add a google plus icon to my webpage but I haven't been able to make it work. I use HTML5 and I have tried doing this:
I added the following <script> before the </body>
<script src="http://ift.tt/xnjN8S"></script>
and this in the place I want it to be shown.
<g:plusone size="tall" count="true"></g:plusone>
but I get the following error
Refused to display 'http://ift.tt/1E0qSnV…refresh&id=I0_1425069928860&parent=file%3A%2F%2F&pfname=&rpctoken=36362517' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I also checked this question but the &output=embed solution isn't working for me.
I was able to use the facebook and twitter share using iframe but I can't find an example for doing the same for the google +1.
NOTE: The page I'm making is part of an assignment and it's not supposed to be online until after the deadline. I don't know if the problem is because the page is still local on my computer.
Google Map API v3 as gmaps.js not displaying in slideshow
I'm trying to use gmaps.js to place a map within a particular slideshow slide. However, when checking the site locally using Chrome Dev Tools, the size of the div indicates that the map is 0px in height and width. The parent div containers all specify a height and width as a percent and the map div itself also has percentages for height and width. I've been using a online website creation software called Froont where the slideshow was created with 4 slides as follows:
HTML (the code has been truncated for brevity):
<head>
<meta charset="UTF-8">
<link rel="schema.DC" href="http://ift.tt/mToXri">
<title>flows_index</title>
...
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
...
<script src="http://ift.tt/UE5hJi"></script>
<script src="vendor/hpneo-gmaps-0.4.17-0-gad937e4/hpneo-gmaps-ad937e4/gmaps.js"></script>
<style type="text/css">
#map {
width: 400px;
height: 400px;
}
#maptest {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="b-content">
<div id="fr_54ddaabcc1cd766e4a0001b8" class="fr-widget fr-container fr_main">
<!--
--><div id="fr_54ddadd2c1cd766e4a0001ce" class="fr-widget fr-container fr_content">
<div id="fr_54ddb0c7c1cd766e4a0001de" class="fr-widget fr-container fr_container_4">
<!--
--><div id="fr_54ebb42476ae113ae400006a" class="fr-widget fr-slideshow swiper-container fr_slideshow" data-slideshow-autoplay="6000" data-slideshow-dots="true">
<div class="swiper-wrapper"></div><!--
--><div id="fr_54ebb42476ae113ae4000073" class="fr-widget fr-img fr_left_arrow">
<img src="images/thumbnail/arrow-left.png_70x80.png" />
</div><!--
--><div id="fr_54ebb42476ae113ae4000071" class="fr-widget fr-img fr_right_arrow">
<img src="images/thumbnail/arrow-right.png_70x80.png" />
</div><!--
--><div id="fr_54ebb42476ae113ae400006f" class="fr-widget fr-container fr_slide_1">
<div id="fr_54ee974bc1cd76293700000d" class="fr-widget fr-container fr_apimap_container">
<div id="map" class="fr-widget fr-container fr_map_canvas">
<script>
var map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
</script>
</div>
</div>
</div><!--
--><div id="fr_54ebb42476ae113ae400006d" class="fr-widget fr-container fr_slide_2">
<div id="fr_54ee454cc1cd766f3c000039" class="fr-widget fr-img fr_image_5">
<img src="images/thumbnail/figure-1_1.png_5694x3744.png" />
</div>
</div><!--
--><div id="fr_54ee45bdc1cd766f3c00003e" class="fr-widget fr-container fr_slide_3">
</div><!--
--><div id="fr_54ee45c5c1cd766f3c000045" class="fr-widget fr-container fr_slide_4">
</div>
<div class="fr-slideshow-dots" style="display:block;">
<span class="swiper-pagination-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
</div>
<div id="maptest">
<script>
var maptest = new GMaps({
div: '#maptest',
lat: -12.043333,
lng: -77.028333
});
</script>
</div>
</div>
</div>
</div>
</div>
</body>
CSS (pretty extensive so I just included the relevant div classes):
.fr_slide_1 {
float: none;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
background-position: center center;
background-size: cover;
position: absolute
}
.fr_slideshow {
float: none;
display: block;
width: 100%;
height: 500px;
vertical-align: top;
margin-top: 2em;
position: relative;
min-height: 340px;
max-width: 1024px
}
.fr_slideshow .fr-slideshow-dots .swiper-pagination-switch {
background-color: black
}
.fr_left_arrow {
display: block;
top: 50%;
width: 35px;
vertical-align: top;
margin-top: 0;
margin-right: auto;
margin-left: 1em;
position: absolute;
z-index: 5;
cursor: pointer;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%)
}
.fr_right_arrow {
display: block;
top: 50%;
width: 35px;
vertical-align: top;
margin-top: 0;
margin-right: 1em;
margin-left: 0;
position: absolute;
right: 0;
z-index: 5;
cursor: pointer;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%)
}
.fr_apimap_container {
float: none;
display: block;
width: 90%;
height: 93%;
margin-right: auto;
margin-left: auto
}
.fr_map_canvas {
float: none;
display: block;
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto
}
So far I've tried renaming the slide id from an original automated id (as shown here) but the stylesheet specification of the element id doesn't seem to override the class style. Also, there is an additional test gmaps.js map in here which actually does work so I know it isn't the javascript implementation. Any ideas on how to get the map api to display as a slide?
Canvas Element Squished in IE10
My canvas element distorts in Internet Explorer 9 & 10, it's at half of the height it should be.
The canvas should be a responsive 640x480 box with a large red circle, not an oblong ellipse. I'm hoping it would take a css spec fix, but I'm not clear what the css or javascript fix would be.
In ie10 and ie9 it looks like this: http://ift.tt/1FGtFRK
The code and correct display in chrome, firefox, safari and ie11 can be seen here:
This is a backwards compatibility requirement for a project, so wishing for visitors to not use ie10 is not an option for this.
Submit canvas images into input array via POST method
I am trying to get work my code, but I have not been successful. Basically what I want is to apply a resize algorithm to multiple images selected by the user, making them in HTML5 Canvas and then inserting each string (DataURL) in the input array to be sent by via POST method.
My code (CLIENT) index.html:
<html>
<head>
</head>
<body>
<input type="file" id="pictures" multiple><br>
<form id="frm" action="save.php" method="POST">
<input type="hidden" name="sizedpics[]" id="sizedpics">
<button type="button" onclick="resize()">submit!</button>
</form>
<canvas style="display:none;" id="canvas" width="800"></canvas><br>
<script>
var pics=[];
function resize()
{
var numpictures=pictures.files.length;
var compresion=0.5;
var dataurl;
for (i=0;i<numpictures;i++)
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function ()
{
canvas.height = canvas.width * (img.height / img.width);
/// step 1
var oc = document.createElement('canvas'), octx = oc.getContext('2d');
oc.width = img.width * compresion;
oc.height = img.height * compresion;
octx.drawImage(img, 0, 0, oc.width, oc.height);
/// step 2
octx.drawImage(oc, 0, 0, oc.width * compresion, oc.height * compresion);
ctx.drawImage(oc, 0, 0, oc.width * compresion, oc.height * compresion, 0, 0, canvas.width, canvas.height);
// Step 3
dataurl = canvas.toDataURL("image/jpeg");
pics.push(dataurl);
}
img.src = window.URL.createObjectURL(pictures.files[i]);
}
document.getElementById("sizedpics").value=pics;
document.forms["frm"].submit();
}
</script>
</body>
</html>
My code (SERVER) save.php
<?php
print_r(count($_POST['sizedpics']));exit();
?>
I think there is a problem of sync with the javascript, but I don't know how to solve it, I need to send all images (base64 encoded DataURL strings) to my server using a single input "sizedpics".
Some of you know where the error? Thanks for reading, and please excuse my horrible way to write English :-)
IE keeps holding mouse/touch down when releasing outside of Iframe window
I've been looking for an answer for days, but to no avail. I'm making this Cordova app where in IE I need to run all unsafe webcontent in an IFrame. So far everything is going well, but I am running into a problem with Internet Explorer 11 to 9 and Window Phone 8.1 IE. in Firefox and Chrome is works fine.
When I press the left-mouse down inside the IFrame and drag it outside the IFrame and release, I can move my mouse inside the IFrame again and it still thinks that my left-mouse button is pressed down. This also happends when using touch controls and makes the problem so much worse.
I have this fiddle example that shows the problem. Try dragging the map outside of the Fiddle IFrame release and move back to the map to confirm that mouse/touch is still down. http://ift.tt/1BnCS2j
Thanks in advance. I'm having a hard time debugging this issue but i suspect that it is some mouse/touch event that is not being triggered.
<div id="mapdisplay" style="width: 500px; height: 400px; background: grey" />
<script>
$(function() {
/**
* Moves the map to display over Berlin
*
* @param {H.Map} map A HERE Map instance within the application
*/
function moveMapToBerlin(map) {
map.setCenter({ lat: 52.5159, lng: 13.3777 });
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: '32pgIHkvuyWtWbBM7LhF',
app_code: 'fpwF_cWgzvckmNL12RchNg',
useCIT: true
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('mapdisplay'),
defaultLayers.normal.map);
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
moveMapToBerlin(map);
});
<script/>
Sort JSON objects and append to html using javascript/JQM
First time using JSON and total beginner at javascript / JQM
I am trying to read a JSON file, sort it by country name ie title and display in a listview. I am not sure if I am overcomplicating things by trying to use a two dimensional array to sort. Any help, greatly appreciated.
js
<script type="text/javascript">
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open("GET", "european_countries.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse (hr.responseText);
var results = document.getElementById("results");
var country, flag, population, avg_growth, date;
for (var obj in data){
var countries = [[]];
var i = 0;
title = data[obj].title;
flag = data[obj].flag;
population = data[obj].population;
avg_growth = data[obj].avg_annual_growth;
date = data[obj].date;
countries[i][0] = title;
countries[i][1] = flag;
countries[i][2] = population;
countries[i][3] = avg_growth;
countries[i][4] = date;
i++;
}
countries.sort();
var listHTML = "";
for (i=0; i < countries.length; i++) {
for (var details in countries[i]) {
listHTML += '<li><a href="#' + countries[i][0] + '</a></li>';
}
}
$("#countryList").empty().append(listHTML).listview("refresh");
}
}
hr.send(null);
// display message while data loading
// could include animated gif or image here
results.innerHTML = "requesting...";
}
</script>
html
<body>
<div id="results"></div>
<div data-role="page" id="home">
<div data-role="header">
<h2>European Countries</h2>
</div>
<div role="main">
<div id="test"></div>
<ul id="countryList" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li></li>
</ul>
</div>
<div data-role="footer">
</div>
</div><!-- page -->
<script type="text/javascript">
ajax_get_json();
</script>
</body>
json
{
"c1":{
"title":"Russia",
"flag":"flags/flags/Russia.png",
"population":"144,031,000",
"avg_annual_growth":"250,000",
"date":"January 1, 2015"
},
"c2":{
"title":"Germany",
"flag":"flags/Germany.png",
"population":"81,172,000",
"avg_annual_growth":"271,000",
"date":"December 31, 2013"
},
"c3":{
"title":"Turkey",
"flag":"flags/flags/Turkey.png",
"population":"78,214,000",
"avg_annual_growth":"1,035,000",
"date":"December 31, 2014"
}, ...etc
Javascript canvas gap after fill of shapes with common border
I would like to understand & learn a solution for the issue I am experiencing when I am filling two shapes/paths with a shared border, i.e. after the fill is called for all the shapes there is still a tiny gap present between them.
The snippet presents the code doing the drawing of the involved shapes/paths:
ctx.beginPath();
ctx.moveTo(pBottom.x, pBottom.y);
ctx.lineTo(0, 0);
ctx.lineTo(pTop.x, pTop.y);
ctx.lineTo(pTopFront.x, pTopFront.y);
ctx.lineTo(pBottomFront.x, pBottomFront.y);
ctx.fillStyle = gradientTopSide;
ctx.fill();
ctx.fillStyle = gradientBottomSide;
ctx.fill();
ctx.beginPath();
ctx.moveTo(pBottom.x, pBottom.y);
ctx.arc(0, 0, radiusBackArc, (angleBottomBack) * Math.PI / 180, (angleTopBack) * Math.PI / 180);
ctx.lineTo(0, 0);
ctx.fillStyle = gradientBackArc;
ctx.fill();
The gaps are visible to the left (by the blue circle), to the top of it and to the bottom. They are where the fills of radial and linear gradients meet.
I wanted play a bit with canvas to create a simple light/torch effect and these lines are ruining my fun. Certainly cause I do not know how to fill them in a nice way without ruining the gradient effect.
Please find the JSFiddle presenting the issue.
How to make a download link also activate modal pop up message?
first time asker here.
I'm trying to make a download button not only serve the file download but also cause a modal pop up to be activated giving the user simple instructions on downloading the file.
I'm using what I've researched online as this:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: absolute;
bottom: -125px;
left: 10px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
/*background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);*/
}
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<img src="http://ift.tt/1ABLuSc" />
</div>
</div>
<a href="#openModal" onclick="window.open('pathtodownloadfile');" class="download-now">Download</a>
It works in that it causes the modal pop up to activate, and it opens a new tab for the file to be served from.
Is there any way to do this so that the file can be served without opening a new window? I've seen sites have a download button where when pressed, a small instructional modal pop up occurs and helps the user to download/install the file all within the same page, no second window needed..
What am I missing?
SketchUp export problems
I download models from SketchUp warehouse then convert them to obj or dae format using SketchUp export and load them to THREE.js, the problem is the exported files look like have different format or some errors it load but sometimes load and sometimes do not load and the files which are loaded are rendered very slowly, i try the same code with another files exported from different program like blender it perform very well, attached sample of the file from SketchUp, are there any another method to convert ksp files to obj without using SketchUp or amethod to make SketchUp export files well formatted?
# Alias OBJ Model File
Exported from SketchUp, (c) 2000-2012 Trimble Navigation Limited
File units = meters
mtllib 274.mtl
g Mesh1
usemtl c_PalmFan_03 v 1.89802 5.76203 0.483329 vt 0.379374 0.743859 vn -0.707628 0.675475 0.207356 v 2.07848 5.95885 0.457975 vt 0.323886 0.892123 v 1.84212 5.73898 0.367616 vt 0.320363 0.694306 v 2.05188 5.97526 0.313759 vt 0.240825 0.865938 v 1.84702 5.76088 0.313032 vt 0.285618 0.69676 v 2.02479 5.97445 0.223955 vt 0.191427 0.84094 v 1.85189 5.79836 0.207558 vt 0.219497 0.697696 v 1.97042 5.95669 0.096287 vt 0.124702 0.79231 v 1.83959 5.80906 0.130719 vt 0.17483 0.685284 v 1.91754 5.91479 0.0522931 vt 0.109251 0.747354 v 1.7014 5.70018 0.0137917 vt 0.133242 0.567753 v 1.81569 5.85234 -0.0918272 vt 0.0428674 0.659035 v 1.44572 5.46522 -0.0933585 vt 0.12363 0.353491 v 1.2781 5.2193 0.135767 vt 0.301944 0.221795 v 1.18029 5.14835 0.0330668 vt 0.260213 0.138017 v 1.06241 5.01972 0.0498476 vt 0.296594 0.0411771 v 1.1467 5.02485 0.320776 vt 0.445056 0.118708 v 1.0526 4.93185 0.302569 vt 0.45461 0.0404713 v 1.05045 4.91102 0.363111 vt 0.492419 0.0404713 v 1.15712 5.00898 0.40803 vt 0.496563 0.129867 v 1.08688 4.86112 0.649986 vt 0.661286 0.0789474 v 1.15031 4.88649 0.783791 vt 0.729793 0.135242 v 1.1706 4.97645 0.559995 vt 0.587301 0.145444 v 1.26327 4.98042 0.863298 vt 0.753878 0.230842 v 1.24382 5.02744 0.643761 vt 0.622788 0.208358 v 1.50941 5.10801 1.28768 vt 0.961225 0.446517 v 1.5332 5.20071 1.06687 vt 0.819803 0.459693 v 1.7083 5.28484 1.39037 vt 0.980634 0.613754 v 1.6761 5.29873 1.23522 vt 0.892063 0.582618 v 1.7636 5.35277 1.35778 vt 0.94832 0.658458 v 1.73899 5.36671 1.2284 vt 0.873967 0.634349 v 1.86503 5.4295 1.45398 vt 0.985245 0.745031 v 1.75139 5.40586 1.14318 vt 0.818679 0.642098 v 2.07208 5.67531 1.35983 vt 0.881457 0.913241 v 1.89007 5.55439 1.13261 vt 0.781531 0.7563 v 2.17156 5.78693 1.33567 vt 0.844592 0.994678 v 1.90408 5.58591 1.07772 vt 0.74459 0.766262 v 2.21356 5.83897 1.30948 vt 0.819166 1.02859 v 1.92305 5.62566 1.01297 vt 0.700471 0.78003 v 2.20044 5.85785 1.20323 vt 0.756538 1.01465 v 1.93086 5.65509 0.94374 vt 0.656051 0.784451 v 2.22309 5.9129 1.10119 vt 0.688612 1.03036 v 1.93834 5.68728 0.864439 vt 0.605494 0.788308 v 2.22815 5.97188 0.926351 vt 0.57967 1.02943 v 1.87555 5.66033 0.737922 vt 0.54134 0.732755 v 2.24444 6.01116 0.853948 vt 0.531424 1.04076 v 1.94059 5.7405 0.698729 vt 0.502808 0.785311 v 2.27686 6.06703 0.782576 vt 0.480251 1.06544 v 2.03015 5.84189 0.674074 vt 0.467824 0.858544 v 2.12918 5.94334 0.681562 vt 0.450571 0.940535 v 1.89482 5.73016 0.576232 vt 0.437373 0.743933 v 2.15225 6.00232 0.568152 vt 0.375537 0.956269 f 1/1/1 2/2/1 3/3/1 4/4/1 5/5/1 6/6/1 7/7/1 8/8/1 9/9/1 10/10/1 11/11/1 12/12/1 13/13/1 14/14/1 15/15/1 16/16/1 17/17/1 18/18/1 19/19/1 20/20/1 21/21/1 22/22/1 23/23/1 24/24/1 25/25/1 26/26/1 27/27/1 28/28/1 29/29/1 30/30/1 31/31/1 32/32/1 33/33/1 34/34/1 35/35/1 36/36/1 37/37/1 38/38/1 39/39/1 40/40/1 41/41/1 42/42/1 43/43/1 44/44/1 45/45/1 46/46/1 47/47/1 48/48/1 49/49/1 50/50/1 51/51/1 52/52/1
g Mesh2 PalmFan_02_2 Leaf_PalmFanWithTexture_02_2 Leaf_Frawn_1_2 Canopy_PalmFan_01_1_1 T_ChamaeropsHumilis_03_1 Model
v 1.02196 6.28014 0.624899 vn 0.189301 -0.180777 0.965135 v 1.04584 6.54355 0.669551 v 0.897727 6.24404 0.642503 v 0.902439 6.5592 0.700612 v 0.847421 6.27105 0.657429 v 0.810348 6.55413 0.717725 v 0.748991 6.31675 0.685295 v 0.675224 6.5246 0.738696 v 0.673079 6.32772 0.702239 v 0.619604 6.46635 0.738694 v 0.525879 6.17621 0.702732 v 0.456332 6.37602 0.753799 v 0.356763 5.85568 0.675865 v 0.52894 5.53532 0.582088 v 0.405898 5.43542 0.587509 v 0.390503 5.26328 0.558286 v 0.669009 5.28218 0.507201 v 0.626838 5.1564 0.491912 v 0.683509 5.13108 0.476054 v 0.754269 5.26472 0.487208 v 0.964399 5.07673 0.410779 v 1.10773 5.11676 0.390165 v 0.901519 5.22774 0.451398 v 1.21286 5.24652 0.39385 v 1.00014 5.29998 0.445588 v 1.67937 5.4368 0.33799 v 1.47691 5.5516 0.399203 v 1.82922 5.67901 0.353966 v 1.67398 5.6908 0.386623 v 1.81306 5.76886 0.373966 v 1.68421 5.78186 0.401673 v 1.93092 5.87625 0.370963 v 1.60694 5.8307 0.425978 v 1.89681 6.20243 0.43875 v 1.63372 6.02985 0.458027 v 1.90036 6.35139 0.465955 v 1.58554 6.06979 0.474957 v 1.88674 6.42016 0.481509 v 1.52935 6.12034 0.495446 v 1.7828 6.44083 0.505765 v 1.46597 6.15683 0.514713 v 1.69233 6.51028 0.536519 v 1.39297 6.19656 0.536473 v 1.52837 6.58181 0.582075 v 1.2567 6.15475 0.555368 v 1.46424 6.63139 0.603943 v 1.2369 6.26075 0.579108 v 1.40535 6.70332 0.628964 v 1.23734 6.39593 0.604341 v 1.27068 6.5326 0.623401 v 1.10894 6.24142 0.600585 v 1.16958 6.60685 0.657139 f 53/1/2 54/2/2 55/3/2 56/4/2 57/5/2 58/6/2 59/7/2 60/8/2 61/9/2 62/10/2 63/11/2 64/12/2 65/13/2 66/14/2 67/15/2 68/16/2 69/17/2 70/18/2 71/19/2 72/20/2 73/21/2 74/22/2 75/23/2 76/24/2 77/25/2 78/26/2 79/27/2 80/28/2 81/29/2 82/30/2 83/31/2 84/32/2 85/33/2 86/34/2 87/35/2 88/36/2 89/37/2 90/38/2 91/39/2 92/40/2 93/41/2 94/42/2 95/43/2 96/44/2 97/45/2 98/46/2 99/47/2 100/48/2 101/49/2 102/50/2 103/51/2 104/52/2
g Mesh3
v -0.581642 4.19757 0.610548 vn -0.418638 0.900173 0.120131 v -0.81773 4.08096 0.661631 v -0.515751 4.21332 0.722158 v -0.791617 4.07375 0.806686 v -0.525334 4.20126 0.779128 v -0.761671 4.07581 0.895558 v -0.537861 4.18083 0.888578 v -0.698485 4.08863 1.01971 v -0.526371 4.17583 0.966121 v -0.632315 4.11432 1.05777 v -0.353579 4.24264 1.06761 v -0.508365 4.15401 1.19233 v -0.0274677 4.38427 1.14279 v 0.203889 4.52649 0.883328 v 0.32503 4.5705 0.975726 v 0.479257 4.64671 0.942132 v 0.385582 4.63888 0.67437 v 0.506852 4.69451 0.680143 v 0.513196 4.70583 0.61741 v 0.377156 4.64678 0.585824 v 0.482681 4.73045 0.326588 v 0.40807 4.713 0.197359 v 0.368557 4.66344 0.430965 v 0.265887 4.65573 0.130972 v 0.27828 4.63164 0.354694 v -0.0292062 4.57236 -0.272678 v -0.0730914 4.52112 -0.0416693 v -0.281747 4.46538 -0.351107 v -0.248986 4.45986 -0.195543 v -0.355547 4.42555 -0.309849 v -0.331148 4.41955 -0.179817 v -0.481769 4.37822 -0.395047 v -0.352277 4.39776 -0.0902248 v -0.756472 4.23369 -0.269335 v -0.533189 4.30962 -0.060156 v -0.887219 4.16773 -0.230678 v -0.554626 4.29183 -0.00161613 v -0.943359 4.13724 -0.197866 v -0.583088 4.26934 0.0677809 v -0.932546 4.12789 -0.0900999 v -0.597303 4.25305 0.140262 v -0.967975 4.09695 0.0182614 v -0.611686 4.23531 0.223079 v -0.984828 4.06495 0.199277 v -0.53748 4.25357 0.34488 v -1.01025 4.04287 0.276197 v -0.624333 4.20658 0.394287 v -1.05658 4.0109 0.354282 v -0.742218 4.14671 0.432089 v -0.870522 4.08625 0.438051 v -0.572023 4.21489 0.514295 v -0.907178 4.05316 0.5582 f 105/1/3 106/2/3 107/3/3 108/4/3 109/5/3 110/6/3 111/7/3 112/8/3 113/9/3 114/10/3 115/11/3 116/12/3 117/13/3 118/14/3 119/15/3 120/16/3 121/17/3 122/18/3 123/19/3 124/20/3 125/21/3 126/22/3 127/23/3 128/24/3 129/25/3 130/26/3 131/27/3 132/28/3 133/29/3 134/30/3 135/31/3 136/32/3 137/33/3 138/34/3 139/35/3 140/36/3 141/37/3 142/38/3 143/39/3 144/40/3 145/41/3 146/42/3 147/43/3 148/44/3 149/45/3 150/46/3 151/47/3 152/48/3 153/49/3 154/50/3 155/51/3 156/52/3
g Mesh4 PalmFan_02_4 Leaf_PalmFanWithTexture_02_4 Leaf_Frawn_1_4 Canopy_PalmFan_01_1_1 T_ChamaeropsHumilis_03_1 Model
v -0.0448758 3.71117 0.926883 vn -0.699344 0.622891 0.350607 v -0.170767 3.5046 1.04276 v 0.0419301 3.76166 1.01032 v -0.0949755 3.51888 1.16856 v 0.0593559 3.75016 1.06552 v -0.0398645 3.53966 1.24157 v 0.0964939 3.73313 1.16984 v 0.0504073 3.58712 1.33733 v 0.135474 3.73864 1.23782 v 0.107195 3.64203 1.35303 v 0.284625 3.88193 1.28075 v 0.239537 3.74131 1.44063 v 0.518347 4.15898 1.25474 v 0.555754 4.37331 0.948574 v 0.669042 4.47256 0.998214 v 0.751189 4.60751 0.92231 v 0.582997 4.54192 0.703354 v 0.660805 4.64621 0.673278 v 0.638999 4.65525 0.613723 v 0.541407 4.53969 0.624367 v 0.50063 4.64545 0.355126 v 0.401167 4.58843 0.258031 v 0.472486 4.54107 0.484434 v 0.285467 4.46955 0.238455 v 0.385018 4.46753 0.440622 v -0.0638031 4.23793 -0.0467196 v 0.00372988 4.18694 0.178571 v -0.253096 4.02453 -0.0451694 v -0.168854 4.04395 0.0883614 v -0.282067 3.95852 0.0143152 v -0.213509 3.97218 0.126801 v -0.395559 3.85448 -0.0272193 v -0.189874 3.94886 0.215375 v -0.514835 3.61036 0.16857 v -0.290068 3.79109 0.295822 v -0.580299 3.49537 0.242278 v -0.279372 3.76927 0.355923 v -0.601751 3.44508 0.288841 v -0.268589 3.74077 0.428061 v -0.550786 3.44828 0.38481 v -0.247677 3.72439 0.498877 v -0.528341 3.41156 0.494821 v -0.222627 3.70727 0.579251 v -0.464515 3.38673 0.666239 v -0.126465 3.76436 0.669632 v -0.44875 3.36043 0.744408 v -0.16021 3.68663 0.74042 v -0.44552 3.31602 0.829754 v -0.218024 3.58279 0.80959 v -0.295389 3.47177 0.852513 v -0.0784057 3.72493 0.835541 v -0.268869 3.43332 0.973724 f 157/1/4 158/2/4 159/3/4 160/4/4 161/5/4 162/6/4 163/7/4 164/8/4 165/9/4 166/10/4 167/11/4 168/12/4 169/13/4 170/14/4 171/15/4 172/16/4 173/17/4 174/18/4 175/19/4 176/20/4 177/21/4 178/22/4 179/23/4 180/24/4 181/25/4 182/26/4 183/27/4 184/28/4 185/29/4 186/30/4 187/31/4 188/32/4 189/33/4 190/34/4 191/35/4 192/36/4 193/37/4 194/38/4 195/39/4 196/40/4 197/41/4 198/42/4 199/43/4 200/44/4 201/45/4 202/46/4 203/47/4 204/48/4 205/49/4 206/50/4 207/51/4 208/52/4
g Mesh5 PalmFan_02_5 Leaf_PalmFanWithTexture_02_5 Leaf_Frawn_1_5 Canopy_PalmFan_01_1_1 T_ChamaeropsHumilis_03_1 Model
v 0.995179 3.57557 1.2275 vn 0.12687 0.483137 0.866304 v 1.08167 3.34865 1.34139 v 1.09657 3.6402 1.17661 v 1.22241 3.37529 1.30591 v 1.15483 3.63155 1.1729 v 1.30653 3.40506 1.277 v 1.26587 3.6206 1.16274 v 1.42084 3.46721 1.2256 v 1.34148 3.63247 1.14505 v 1.44884 3.53135 1.18572 v 1.41668 3.79998 1.04062 v 1.56438 3.65214 1.10144 v 1.44256 4.11493 0.86118 v 1.14895 4.33515 0.781359 v 1.22287 4.45281 0.704918 v 1.16614 4.60105 0.630553 v 0.913197 4.50805 0.719461 v 0.900696 4.62494 0.656102 v 0.837175 4.63041 0.662355 v 0.826157 4.49902 0.737243 v 0.551725 4.59802 0.722221 v 0.434075 4.52482 0.780278 v 0.673006 4.48915 0.765179 v 0.389273 4.38716 0.863613 v 0.610532 4.40139 0.82327 v 0.0311336 4.09872 1.07693 v 0.268133 4.05881 1.06447 v -0.00906188 3.85461 1.21895 v 0.141154 3.88777 1.17846 v 0.0431982 3.78394 1.25071 v 0.169209 3.80878 1.2184 v -0.0227666 3.66146 1.32868 v 0.261744 3.78934 1.21569 v 0.143971 3.3981 1.45113 v 0.318972 3.61536 1.30434 v 0.202211 3.27254 1.51263 v 0.380583 3.59531 1.3065 v 0.243388 3.21879 1.53658 v 0.45408 3.5686 1.31063 v 0.349238 3.23031 1.51465 v 0.528508 3.55565 1.30695 v 0.462645 3.19729 1.51645 v 0.61327 3.54265 1.30179 v 0.645714 3.18292 1.49766 v 0.723572 3.61539 1.24507 v 0.726256 3.15922 1.49908 v 0.785924 3.53222 1.28232 v 0.81111 3.11538 1.5111 v 0.841375 3.41904 1.33732 v 0.86664 3.29549 1.40252 v 0.897735 3.58385 1.23715 v 0.991987 3.26141 1.40317 f 209/1/5 210/2/5 211/3/5 212/4/5 213/5/5 214/6/5 215/7/5 216/8/5 217/9/5 218/10/5 219/11/5 220/12/5 221/13/5 222/14/5 223/15/5 224/16/5 225/17/5 226/18/5 227/19/5 228/20/5 229/21/5 230/22/5 231/23/5 232/24/5 233/25/5 234/26/5 235/27/5 236/28/5 237/29/5 238/30/5 239/31/5 240/32/5 241/33/5 242/34/5 243/35/5 244/36/5 245/37/5 246/38/5 247/39/5 248/40/5 249/41/5 250/42/5 251/43/5 252/44/5 253/45/5 254/46/5 255/47/5 256/48/5 257/49/5 258/50/5 259/51/5 260/52/5
g Mesh6 PalmFan_02_6 Leaf_PalmFanWithTexture_02_6 Leaf_Frawn_1_6 Canopy_PalmFan_01_1_1 T_ChamaeropsHumilis_03_1 Model
Inscription à :
Articles (Atom)