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.
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 have a multi-stage dropdown component that works, but unfortunately is applied to all divs that share the same className. I.e: all items drop down when one is clicked - when I obviously just want the one clicked.
Ive tried other solutions that involve mapping, using (this) and also selecting the div by id via document query then iteration with for loops but nothing has worked. Mainly because even if I can isolate the div (say with useRef e.g.), trigging the function inherently involves applying the style change to all divs with the same classname. With this in mind, I'm pretty sure I need to change the initial css hook. Alternative is obviously to give each dropdown item its own css class which I feel would be too repetitive to even try.
Here is my code (for berevity Ive just included the dropdown and not scroll up, also just one of the items - html is identical for the other 7 items:
const [content, Toggle] = useState(styles.CT007Content)
const [TrackList, Drop] = useState(styles.songContainer)
const [artwork, Slide] = useState(styles.artworkContainer)
const [title, Darkmode] = useState(styles.releaseTitle)
const [arrow, Unlock] = useState(styles.arrow)
const open = () => {
if (arrow==styles.arrow){
Unlock(styles.arrowChecked);}
if (title==styles.releaseTitle){
Darkmode(styles.releaseTitleClicked)};
if (TrackList==styles.songContainer){
Drop(styles.songContainerOpen)};
if (content==styles.CT007Content){
Toggle(styles.CT007ContentOpen)};
if (artwork==styles.artworkContainer){
Slide(styles.artworkContainerOpen)};
html
{/* item 1 of 10 */}
<div className={styles.Release} id="CT007">
<div className={styles.releasesHeader} id="CT007">Releases (2014-2018, 2022)</div>
<div className={title} onClick={open} id="CT007">CT007
<div className={arrow} id="CT007">></div>
<div className={arrow} id="CT007">></div>
<div className={arrow} id="CT007">></div>
</div>
<content className={content} id="CT007">
<div className={TrackList} id="CT007">
<div className={styles.trackContainer} onClick={changeStyle} id="CT007">
<audio controls className={audiostyle} src="/TEX86.mp3" id="CT007">
{/* <source src="/TEX86.mp3" type = "audio/mpeg"/> */}
</audio>
<div className={styles.trackText} id="CT007">
<h4>You'll Never Get Rich</h4>
</div>
</div>
<div className={styles.trackContainer} id="CT007">
<audio controls className={audiostyle} id="CT007">
<source src="" type = "audio/mpeg"/>
</audio>
<div className={styles.trackText} id="CT007">
<h4>Death by Dole</h4>
</div>
</div>
</div>
<div className={artwork} id="CT007">
<svg src=""/>
</div>
</content>
</div>
To iterate, the functionality works fine, I just dont want it applied to all divs when only one is clicked. Many thanks in advance. Im sure it is something obvious but I am new to react, any help would be appreciated
documentQuery Selector, wrapping hook in a function for each div OnClick, mapping/for looping
In Fancybox 3, is it possible to have HTML inside an image gallery?
This HTML will have a link to an external site.
Whatever I do, it doesn't work.
<div id="photo-gallery" style="display: none">
<a data-fancybox="photo-gallery" href="photo-1.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-2.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-3.jpg"></a>
The 4th item should be just a window with a link to another site, like:
<a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a>
</div>
Please, check documentation for samples - http://fancyapps.com/fancybox/3/docs/
I guess you are looking for something like this:
<a data-fancybox="photo-gallery" data-type="iframe" href="some-page.html">4</a>
Demo - https://codepen.io/anon/pen/vdxPJg?editors=1000
Edit #1
If you want to automatically add some extra content at the end of the gallery, you can use this snippet:
$('[data-fancybox="photo-gallery"]').fancybox({
onInit: function(instance) {
instance.createGroup({
type : 'html',
content : '<div><h1>Hi</h1><a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a></div>'
});
}
})
Demo - https://codepen.io/anon/pen/KQmNGX?editors=1010
Edit #2
This is how you can mix images and inline content:
<a data-fancybox="photo-gallery" href="#info">4</a>
<div id="info">
Click here
</div>
Demo - https://codepen.io/anon/pen/KQmNrX?editors=1010
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
I'm learning meteor, and finding all kinds of difficulties dealing with nested subviews. Since the application I want to write is full of them... that looks like a difficulty. I found this on github, as a readme for a Meteor project to try and deal with this problem.
"I've been playing around with Meteor for a couple weeks. The ease of setup and the powerful reactivity makes this something I want to stick with. I was however frustrated by the difficulty of programmatically configuring, instantiating, destroying and nesting subviews."
Is this an issue that can be handled in Meteor (without adding a lot of complicated work arounds) or should I look for a different platform ?
I love nesting templates. I get reliable results. I now program off a library of both templates and helper functions (usually for form elements) that compose html for me. HTML is a byproduct, and the files we call .html are really a javascript DSL.
There are many S.O. issues raised about insertions into sorted lists giving people problems. I haven't had time to look.
My rule of thumb: Meteor is (well) designed from the beginning to do this easily and reliably.
So far the harder thing to solve was when I added an accordion from foundation, and a refresh of the document led to its initial state (being all closed, or one open). I had to put code in that saved the current section, and code to re-assert that in the rendered callback for the template that used it.
Why not write a prototype of the nesting with just a field or two in places, and find what bothers you?
Here is a sample chain. You see all the nested templates. This template itself is running within multiple.
First template: called 'layout', suggested by iron router. Has basic page and menu. Main body is a yield, set by router. On a sample page, a route calls template 'availability'
<template name='availability'>
{{#each myAgents}}
<form class="custom" id="Agent_{{_id}}" action="">
<div id='availability' class="section-container accordion" data-section="accordion">
<section id="services">
<p class="title" data-section-title><a href="#">
Your Info
</a></p>
<div class="content" data-section-content>
{{>services}}
</div>
</section>
<section id="skills">
<p class="title" data-section-title><a href="#">
Skills
</a></p>
<div class="content" data-section-content>
{{>skills}}
</div>
</section>
<section id="sureties">
<p class="title" data-section-title><a href="#">
Sureties
</a></p>
<div class="content" data-section-content>
{{>sureties}}
</div>
</section>
<section id="time">
<p class="title" data-section-title><a href="#">
Time Available
</a></p>
<div class="content" data-section-content>
{{>time}}
</div>
</section>
<section id="schedule1">
<p class="title" data-section-title><a href="#">
Schedule 1
</a></p>
<div class="content" data-section-content>
{{>schedule}}
</div>
</section>
<section id="schedule2">
<p class="title" data-section-title><a href="#">
Schedule 2
</a></p>
<div class="content" data-section-content>
{{>schedule}}
</div>
</section>
<section id="distance">
<p class="title" data-section-title><a href="#">
Distance
</a></p>
<div class="content" data-section-content>
{{>distance}}
</div>
</section>
</div>
</form>
{{/each}}
</template>
sample further nest:
<template name='services'>
{{label_text fname='name' title='Agent Name' placeholder='Formal Name' collection='agent' passthrough='autofocus=autofocus ' }}
{{label_text fname='agentInCharge' title='Agent In Charge' placeholder='Owner' collection='agent' }}
{{label_text fname='phone' title='Phone Number(s)' placeholder='Include Area Code'collection='agent' }}
{{>gps }}
<h4>Not shared:</h4>
{{label_text fname='email' title='Email:' placeholder='you remain anonymous' collection='agent' }}
</template>
and label_text is a helper, learned from the https://github.com/mcrider/azimuth project:
generateField = (options) ->
options.hash.uniqueId = options.hash.fieldName + "_" + Math.random().toString(36).substring(7) if options.hash.template is "wysiwyg"
options.hash.id = options.hash.id or #_id
options.hash.value = options.hash.value or this[options.hash.fname]
# allow for simple params as default
options.hash.title = options.hash.title or options.hash.fname
options.hash.template = options.hash.template or "label_text"
options.hash.placeholder = options.hash.placeholder or options.hash.title
# compatible with old
options.hash.fieldName = options.hash.fieldname or options.hash.fname
options.hash.label = options.hash.label or options.hash.title
# FIXME: Return error if type not valid template
new Handlebars.SafeString(Template[options.hash.template](options.hash))
Handlebars.registerHelper "label_text", (options) ->
options.hash.collection = options.hash.collection or 'generic'
generateField.call this, options
I am fairly new to Meteor, but I found out really soon that I wanted nested views (aka dynamic includes or sub-templates). I'm not sure whether this is what you mean, but here is my solution.
I created the following handlebars helper, that can be used to create sub-templates:
Handlebars.registerHelper('subTemplate', function(container, property, context, options) {
if (container && container.hasOwnProperty(property)) {
var subTemplate = container[property];
if (typeof subTemplate === 'function') {
return new Handlebars.SafeString(subTemplate(context || this));
}
else if (typeof subTemplate === 'string') {
return new Handlebars.SafeString(Template[subTemplate](context || this));
}
}
});
It can be used inside something I call a generic template. For example to create a list:
<template name="item_list">
<ul class="items-list">
{{#each items}}
<li class="listview-item">
{{subTemplate .. 'listItem' this}}
</li>
{{/each}}
</ul>
</template>
Now invoking this generic template requires that a 'listItem' property is present within its context. This can be either a string with the name of the sub-template, or the inline definition of a sub-template. The example below shows both options:
<template name="my_list">
{{! First option, referring to the sub-template by name:}}
<div>
{{#with listData listItem="my_list_item"}}
{{> item_list}}
{{/with}}
</div>
{{! Second option, inlining the sub-template:}}
<div>
{{#with listData}}
{{#assignPartial 'listItem'}}
<span>{{name}}</span>
{{/assignPartial}}
{{> item_list}}
{{/with}}
</div>
</template>
<template name="my_list_item">
<span>{{name}}</span>
</template>
Template.my_list.listData = function() {
return {
items: collections.people.find()
};
};
The second option requires an extra handlebars helper.
Handlebars.registerHelper('assignPartial', function(prop, options) {
this[prop] = options.fn;
return '';
});
I made more of these kinds of useful helpers, at some point I will probably share them on GitHub.