Comments (9)
I see. You put uls in footer. Then include zuck initiate script after the uls.
const element = document.querySelector("#stories");
const stories = Zuck(element, options);
Put above / your code after ul elements. (inside footer)
That should solve this. If not, tell me. It's js include script placement problem. Not specific to zuck. This can be deducted from your mention about console error.
If you get it to work, tell me. 👈. Or get new errors, also tell me. 🙂.
from zuck.js.
What do you mean? Can you please explain bit more?
from zuck.js.
In the header where the container with the preview of the stories appear, the list elements with all the story items are generated in that same container as well (makes sense). But I would like to be able to have those list items in the footer instead, so that when clicking on a story, the modal fetches the list items from the footer to show. This is to avoid having all the DOM generated in the header and prevent possible SEO issues (or so I've been told). I'm trying to test this with the markup.sample.html
file but it seems like it's part of the createStoryViewer
function where this modal functionality is defined. Hope I explained myself clearer. Is there a workaround for this? Also thank you for responding so quickly!
from zuck.js.
So, you want to
- generate them inside your html footer and embed them in html head
- generate them in footer and also embed them in footer
Which one do you want?
from zuck.js.
Basically I need the <div class="story>
containers in the header (where it should be shown in the frontend), and the <ul class="items">
containers in the footer, and the modal should still work as usual when I click the story thumbnails in the header. Is that what you meant by your option 1?
from zuck.js.
1)You can generate them anywhere you want.
const element = document.querySelector("#stories");
const stories = Zuck(element, options);
Above code runs only when dom rich to it. If you put it inside footer, that's when zuck start to generate stories.
2) Basically I need the <div class="story> containers in the header (where it should be shown in the frontend), and the <ul class="items"> containers in the footer, and the modal should still work as usual when I click the story thumbnails in the header.
Did you try that?
from zuck.js.
const element = document.querySelector("#stories");
const stories = Zuck(element, options);
This generates the whole DOM for the stories, but I need the generated DOM to be separated. Like I said the story thumbnails in the header where I want them to be displayed, and the list items in the footer so that Google does not read elements that are not being displayed on page load.
Did you try that?
I tried adding the markup manually with the help of the markup.sample.html
file by placing the ul
elements in the footer but as expected it gives console errors, because Javascript now does not know where those story items are since they are now in a different place. So I'm looking for a workaround to make the stories look for its story items in the footer. Any ideas how this can be achieved?
from zuck.js.
Thank you very much for your suggestion, but that does not work. The zuck initiate script does the job of getting the #stories
element and injecting all the markup into it. Which does not resolve the issue, since the story items ul
is still being generated inside of it. There either should be an option available to tell the script the location of the story items; or manually placing the expected markup in the header and the ul
elements in the footer, and somehow let the script know where to find these list items. You have an idea of a different approach?
from zuck.js.
please, I can't see your console errors or your template, so support is limited. Maybe try posting them? I can't give a working answer without your template and looking at console errors.
from zuck.js.
Related Issues (20)
- how to stop dom element moving last position after seen
- how call back work
- stories.removeItem(storyId, itemId); is not working HOT 1
- Not working with IOS Device
- Pervious and next button not working HOT 1
- video is not auto-playing in the IOS device
- Is it possible to add an Empty Story with a plus(+) icon HOT 1
- Not working on Live Server (React js) HOT 6
- How to count story view HOT 4
- Problem with the following stories, they do not pass automatically HOT 1
- Multiple instances in one page. HOT 11
- How to use a normal YYYY-MM-DD HH:MM:SS for "time" property HOT 2
- Stories changing positions
- Add caption in stories HOT 1
- Fullview HOT 1
- How to use in ReactJs? HOT 1
- Story Deleted After 24 hrs HOT 1
- Preview issue HOT 1
- Previous and next button not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zuck.js.