This is a question which I'm not fully understanding. I need further insight and I have been unable to find it elsewhere.
Hello everyone. I'm getting an error in the brackets IDE that looks like this http://imgur.com/WccBRtf . I don't understand at all what's going on here, and that's because I don't know what an HTML5 index file really is. The file I have named index.html is just the main HTML5 code for a webpage I wan't to run. The file is as follows
<head>
<!-- Title of webpage -->
<title>
Name of Guild
</title>
<!-- Link the CSS file so that the html5 can display it -->
<link rel = "Stylesheet" type = "text/CSS" href = "GuildPageStyle.css">
</head>
<!-- Main Body of the page -->
<body>
<!--Post section-->
<div class = "PostsSEC">
<!-- The way to display multiple posts is to go through a while loop counting up until all posts have been displayed with the current pots being displayed being equal to the current post in the while loop -->
<p id = "PostMain">
*A post*
</p>
<!--This is not the image, this is box it is in-->
<p id = "PostPosterBoxOR">
< ORIGINAL
<br />
POSTER
</p>
<p id = "PostPosterBoxBL">
</p>
<!--The next section is totally reliant on a server side language. This is the likes and votes by other powered members of the group-->
<div id = "EndMessage">
<!-- Message at the end of the posts declaring that it is the end -->
<h1 id = "PostsEnd">
That's all the current posts
</h1>
<!-- Change the something Missing to a link after completion -->
<h3 id = "ErrorCheckPostEnd">
Something Missing?
</h3>
</div>
</div>
<!--Profile/Users/Follower barier-->
<div id = "Bar">
</div>
<div id = "BackgroundBlock">
</div>
<img src = "http://i.imgur.com/64cUAcH.png" id = "GuildLogo" />
<!--The group of users-->
<div id = "Users">
<!--Replace this section with PHP reliant on the users-->
</div>
<img src = "https://pbs.twimg.com/profile_images/855649567756476416/OHQKYYvY_400x400.jpg" id = "ProfileOne" />
<img src = "https://pbs.twimg.com/profile_images/855649567756476416/OHQKYYvY_400x400.jpg" id = "ProfileTwo" />
<img src = "https://pbs.twimg.com/profile_images/855649567756476416/OHQKYYvY_400x400.jpg" id = "ProfileThree" />
<img src = "https://pbs.twimg.com/profile_images/855649567756476416/OHQKYYvY_400x400.jpg" id = "ProfileFour" />
<img src = "https://pbs.twimg.com/profile_images/855649567756476416/OHQKYYvY_400x400.jpg" id = "ProfileFive" />
<img src = "https://pbs.twimg.com/profile_images/855649567756476416/OHQKYYvY_400x400.jpg" id = "ProfileSix" />
<div id = "BackgroundBlockade">
</div>
<p id = "BioBlock">
This is a bio
</p>
</body>
Now up until yesterday I was fully able to run the file in brackets. Then, for seemingly no reason from my perspective, I became unable to run the code. After it stopped working I changed the name of the HTML5 file to index.html and kept the CSS file exactly the same. I have no idea what's going on, and have been able to understand nothing.
I realize to the more experienced programmer this may seem like a question similar to "Why isn't this code running" when all that's wrong is that they forget to do "std::" instead of just writing out "endl". I'm very new to HTML5 and am completely lost here. I thank you for your time. Have a nice evening.
Here is another image to aid
http://imgur.com/QELF7Ts
(Yes I did try removing the "HTML5 guild page html.html")
So I have resolved the issue. By opening the project as a folder instead of one singular file at a time i managed to succeed in resolving it. Problem solved
Related
im not a coder by any description so please excuse my lack of knowledge.
Im trying to make a basic web page with a floating chatbox style whereby when you click an icon, ( the icon represents words ) the text is filtered into the chatbox.
Im trying to make a communication page for my autistic nephew and he uses something called the PECS system and its a series of pictographical cards on a velcro board which he uses for sentence construction, its pretty basic and only works when he's got the kit with him.
MY aim is to make a web app of some kind ( but just starting with a simple web page to test it on him and see if he's interested in it ) so that anyone can access it on a tablet or phone and talk to him, or indeed he can talk to his friends at school.
there are already some platforms out there and apps, but they just don't quite hit the spot, plus they are expensive to run being subscription models.
my code is this below
<html>
<head>
<title>Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
// some sample icons but need to figure out a way to handle large numbers of feeligs-emotions-actions etc
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
<div class="chat-box"></div>
</div>
</div>
</div>
// chatbox elemt, should be floating when page scrolls as he clicks an icon
<style type="text/css">
.chat-box {
position: relative;
float: right;
background-color: #3fae96;
border: 1px solid #0b0b0b;
padding: 10px;
margin-right: 50px;
}
</style>
<script>
// references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
const chatBox = document.querySelector(".chat-box");
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// filename without extention to the message, causes text overfill othewise
const fileName = event
</script>
</body>
</html>
my problem is i can't get the text from the image click into the chatbox.. nor can i seem to make it 'float' and im pretty much at the end of my knowledge and don't know where to go next. the box is on the right but its not filling with any image names..
the idea is each image he click populates the chat box.. it works in a basic format where it puts the raw text at the bottom, but when i added the chat box function it all stops :(
Many thanks
So this was where i started from once i had the images "clickable" so i went to try and include the chat box feature but this is where im stuck
<html>
<head>
<title>PECS Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>PECS Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
</div>
</div>
</div>
<script>
// Get references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
// Add an event listener to each pictograph
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// Add the filename without extention to the message
messageDisplay.innerText += event.target.src.split('/').pop().split('.')[0];
});
});
</script>
</body>
</html>
i was experimenting with this idea Floating panels left and right CSS and im not getting far with it so i went to a w3 school page and was looking at examples and i think im out of my depth.
I am building a theme and I have images displaying on the site via ACF. I am trying to get the alt text that the client enters when they upload the image. I understand that the image return format should be set to image array or ID, but not URL. Mine were set to URL quite some time ago and I am having trouble revising my code to reflect the alt text when inspected. Here is my current function that displays staff repeater.
function meetOurTeamListing() {
if(have_rows('meet_our_team')):
while(have_rows('meet_our_team')): the_row();
$staffImage = get_sub_field('staff_image');
$staffName = get_sub_field('staff_name');
$staffTitle = get_sub_field('staff_title');
$staffBio = get_sub_field('staff_bio');
$html =
'
<div class="myBtn staff-item">
<img src="'.$staffImage.'" />
<p class="staff-name">'.$staffName.'</p>
<p class="staff-title">'.$staffTitle.'</p>
</div>
<!-- The Modal -->
<div class="myModal modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="modal-header-text">
<p class="modal-name">'.$staffName.'</p>
<p class="modal-pipe">|</p>
<p class="modal-title">'.$staffTitle.'</p>
</div>
</div>
<img src="'.$staffImage.'" />
<div class="modal-body">'.$staffBio.'</div>
</div>
</div>
';
echo $html;
endwhile;
endif;
}
Obviously the sub-field would need to be converted to an image array, however simply switching the radio selector from "image url" to "image array" breaks the images on the front end. Given this context, how can I implement alt text from the WP database dynamically?
Problem solved. Thanks Nicole!
My problem was that when set up the custom fields that took images, I set them to Image URL. This is good if you just want to quickly display an image because it just returns a string. It should be set to Image Array. This results in an itemized list of key/value pairs (ie. alt text) that are accessible in the theme template.
To display your image that is set to an Image Array, here's the syntax:
<img src="'.esc_url($image['url']).'" alt="'.esc_attr($image['alt']).'" />
This works only inside of my PHP function. Alternatively, the following can be used inside a template file among the HTML:
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
I want to scrape some items, which are on the same page, using Scrapy.
HTML looks like this:
<div class="container" id="1">
<span class="title">
product-title1
</span>
<div class="description">
product-desc
</div>
<div class="price">
1.0
</div>
</div>
I need to extract name, description and price.
Unfortunately, sometimes product doesn't have the description and HTML look like this:
<div class="container" id="2">
<span class="title">
product-title2
</span>
<div class="price">
2.0
</div>
</div>
Currently I am using CSS selectors which returns list of all elements existing on the website:
title = response.css('span[class="title"]').extract()
['product-title1', 'product-title2', 'product-title3']
description = response.css('div[class="description"]').extract()
['desc1','desc3']
price = response.css('div[class="price"]').extract()
['1.0','2.0','3.0']
Is it possible to get for example an empty string in place of missing 'desc2' when description object isn't there, using CSS selector?
I recommend you to rewrite you code:
for section in response.xpath('//div[#class="container"]'):
title = section.xpath('./span[#class="title"]/text()').get(default='not-found') # you can use any default value here or just empty string
desctiption = section.xpath('./div[#class="description"]').get()
price = section.xpath('./div[#class="price"]/text()').get()
Check this out..
for section in response.xpath('//div[#class="container"]'):
title = section.xpath('./span[#class="title"]/text()').get()
desctiption_tag = section.xpath("//div[contains(#class,'description')]")
if desctiption_tag:
desctiption = section.xpath('./div[#class="description"]').get()
else:
desctiption = "String"
price = section.xpath('./div[#class="price"]/text()').get()
I'm vague about I should be using in a sort of a simulation app where the user is presented with a web page that presents data from multiple domains and provides a variety of interactions that touch multiple domains.
In this case it is a real estate simulation where the UI presentation shows the user data about houses, offer to buy and sell, status of the users negotiations, etc, information about "state of the world" and that kind of thing. A fair amount of ajax going on in the page as well.
Can I just have a controller which is not associated with a particular domain and then just provide all the different objects? Maybe use a command object to deal with actions coming back from the user?
Hopefully this quesiton is not too vague for a coherent answer, I'm just looking for suggestions on the high level approach.
Yes, you can have a controller which does not directly correlate to a specific domain. For instance you could create a DashboardController. The use of command objects is up to you and your needs, but you can use Domain instance in the above controller just like any other controller.
As #Joshua Moore stated, it's no problem, let me give a small - shortened - example. (hope it gives you a bit of an idea...)
I use in the application a bootstrap-theme and the information on the dashboard (several statistic widgets) is generated through ajax-calls into the dashboard-controller.
First, the UrlMappings.groovy file:
class UrlMappings {
static mappings = {
"/$controller/$action?/$id?(.$format)?"{
constraints {
// apply constraints here
}
}
"/"(controller: "dashboard", action:"index")
"500"(view:'/error')
}
}
Then the controller-code:
package example
import java.util.Random
import grails.converters.JSON
import groovy.time.TimeCategory
class DashboardController {
def index() {}
def contractAmountAsJson() { ...someCode; return Data as JSON... }
}
Then the index.gsp page:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'syParameter.label', default: 'SyParameter')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-8" data-widget-editbutton="false">
<header>
<span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
<h2>Vertragsvolumen aktiver Kunden-Verträge pro Monat</h2>
</header>
<!-- widget div-->
<div>
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body no-padding">
<div id="customerContractAmount" class="chart no-padding"></div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</article>
</body>
</html>
And the javascript as an example:
if ($('#customerContractAmount').length) {
$.ajax({
url: '${request.contextPath}/dashboard/contractAmountAsJson?type=customer',
dataType: 'json',
success: function(chartData) {
Morris.${session?.user?.statisticStyle ? session.user.statisticStyle : "Area"}({
element : 'customerContractAmount',
data : chartData,
xkey : 'period',
ykeys : ['a', 'b', 'c'],
labels : ['bestätigt', 'erstellt', 'in Arbeit']
});
}
});
}
I'm building an HTML page that uses endless scrolling functionality to render new list elements as you scroll down, like on Facebook. I'm using the jquery.pageless plugin.
The thing is, now testing it on IE7, when I load the dynamic content, none of it is styled like it should be. The first set (20 rows), which the server generated in the html page, look fine. Then the next 20-per-page that are rendered with javascript, don't have any of the styles applied.
How do I fix this? Having a hard time testing it in IE7 from a mac. Is this a problem with IE7? Or could perhaps the elements not be being appended to the correct parent div in IE (using jQuery so I doubt this)? Or is there a common hack for reloading the stylesheets after every dynamically created html element is added?
The doctype is HTML5: <!DOCTYPE html>
Thanks for the advice!
Update:
Looking in the IE7 developer panel, the HTML is being spit out all malformed. The first time around it looks like this:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'>
<figure class='snapshot'><time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'><span class='value-title' title='2010-12-16T00:00:00-08:00'></span></time><span></span><img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/heavenly-cleaning-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
Like
</figure>
<section class='details' itemprop='seller' itemtype='http://data-vocabulary.org/Organization'>
<header class='header'>
<hgroup>
<h3 class='user fn org' itemprop='name'>
Name<span class='hyphen'>-</span><span class='distance'>Wheaton, IL</span>
</h3>
<h2 class='title'><span class='quotation-mark'>"</span>Quote<span class='quotation-mark'>"</span><time class='expiration-date dtend'><span class='value-title' title='2011-12-16T00:00:00-08:00'></span></time></h2>
</hgroup>
</header>
<p class='highlights'></p>
<p class='description' itemprop='description'></p>
<footer class='footer'>
<address class='location adr' itemprop='address' itemscope='itemscope' itemtype='http://data-vocabulary.org/Address'>
<span class='locality' itemprop='locality'></span>
<span class='geo' itemprop='geo' itemtype='http://data-vocabulary.org/Geo'>
<span class='latitude' itemprop='latitude'>
<span class='value-title' title='41.850249'></span>
</span>
<span class='longitude' itemprop='longitude'>
<span class='value-title' title='-88.0855459'></span>
</span>
</span>
<span class='tel' itemprop='tel'></span>
</address>
Category: Home
</footer>
</section>
</article>
The second time around it looks more like this:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'/>
<figure class='snapshot'/>
<time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'/>
<span class='value-title' title='2010-12-16T00:00:00-08:00'/>
</time/>
<a href="/users/25?page_id=25" class="fancy-ajax logo">
<span/>
<img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/name-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
</a>
Like
</figure/>
...
I am returning it as a json string and appending it like this:
$(window).load(function() {
var params = paginator;
params.dataType = "string";
$('#content').pageless({
url: window.location.pathname,
params: params,
distance: 500,
totalPages: 10,
loaderImage: "/images/loaders/load.gif",
scrape: function(data) {
var data = $.parseJSON(data);
var paginator = data.paginator;
var search = data.search;
var html = data.pages // html string;
if (data.more == false) {
$.pageless.settings.totalPages = $.pageless.settings.currentPage;
if($.pageless.settings.totalPages <= $.pageless.settings.currentPage){
$.pageless.stopListener();
}
}
$.pageless.settings.params = {dataType: "string", paginator: paginator, q: search.q, c: search.c, l: search.l, a: search.a};
return html;
}
});
})
Since you're using HTML5 elements, I assume you're using HTML5Shiv or Modernizr to hack IE to support those elements?
If not then yes, you will definitely have issues, since IE6/7/8 will simply not recognise those tags as valid HTML.