Materialize Parallax Initialization on Meteor - javascript

I'm using materializecss as a front-end framework for my personal website I am currently developing. I used their starter Parallax template and everything works, but for some reason my Parallax images are not showing. I believe it has something to do with the initialization.
snippet of one of the parallax for the HTML:
<template name="parall">
<div class="parallax"><img src="/public/background1.jpg">
</div>
</template>
JS:
if (Meteor.isClient) {
Template.parall.onRendered(function(){
$(".parallax").parallax();
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}

Have you tried rendering your images with css?
.parallax {
background-image: url("/background1.jpg");
}

Simply try removing "public" from your img src, and instead use "/background1.jpg". [ Assuming "public" directory is in your route project folder ].
You dont have to specify "public" while accessing resources stored in public directory. It is one among the few reserved directory names in meteor structure.

Wrap your div.parallax in div.parallax-container

Wrap the div in a parallax-container as already posted
<div class="parallax-container">
<div class="parallax"><img src="/images/parallax1.jpg"></div>
</div>
and add the following in your CSS
.parallax{
position:static!important
}

Related

How to set active TAB /active/color-changed or whatever similar event on the selected TAB

I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.

Background image in tailwindcss using dynamic url (React.js)

I have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?
I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.
I would do:
style={{backgroundImage: `url(${fetchedImgSrc})`}}
Edit:
It looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image.
The code looks like:
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
I think I have found a solution other than simply using a style attribute.
<div
style={{'var(--image-url)': fetchedUrl}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
This works perfectly fine.
Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.
className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.
<div
style={{'var(--color)': fetchedColor}}
className='text-[color:var(--color)]'>
<!-- ... -->
</div>
you can just use backgroundImage in Style
const bag2 = "https://via.placeholder.com/500"
<div
className = "someting"
style={{backgroundImage: `url(${bag2})`}}
</div>
Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs.
In my case image was coming from an API. If it is the case, stick to style attribute.
In the solution below - bgImage is a prop.
<div className={`justify-center bg-no-repeat bg-cover bg-center rounded-lg`}
style={{ backgroundImage: `url(${bgImage})`}} >
<!-- Children here-->
</div>
If you are having this same issue in 2022, then this is what helped me with tailwind version ^3.0.23. I just moved the image to the public folder and used the link in my tailwind.config.js like so backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" } where /public/img is the directory where I placed the image within the public folder, yours might different. and then called the css like so bg-cover-pic within my project, and that was all it took.
I just went to html to jsx online converter https://magic.reactjs.net/htmltojsx.htm the pasted what I copied from tailwind website -
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
then I just copied my new generated jsx code-
style={{ backgroundImage: 'url(/about.jpg.webp)' }}

How to remove a class when a different template is rendered in Meteor

I am working on a website using Meteor. On one of the pages, I would like some of the images and divs at the top to be animated onto the page.
I have achieved this by adding:
Template.home.rendered=function(){
$('.animateblock').addClass('animated');
};
The added class changes some of the css properties, giving me the desired effect.
The problem I am having is that if I go to a different page of the site and then revisit the page with the animations, it doesn't reset. The class is only ever added once, and I haven't been able to figure out a way to have it removed when another page is visited.
My html code is as follows:
<div class="textAnimate animateblock">
<img src="/home/100.png" class="animateblock percent100" alt="100%">
<img src="/home/antibiotics.png" class="animateblock antibiotic" alt="Antibiotic Free">
<img src="/home/natural.png" class="animateblock natural" alt="All Natural">
<div class="horomoneAnimateContainer">
<div class="animateblock horomoneAnimate">
<img src="/home/horomone.png" class="horomone" alt="Horomone Free">
</div>
</div>
</div>
<div class="stampAnimate animateblock">
<img src="/home/tasty-stamp.png" class="tasty" alt="Tasty Certified">
</div>
I have tried a few different methods, such as adding a removeClass before the addClass, hoping that would fix it, but it did not.
Template.home.rendered=function(){
$('.animateblock').removeClass('animated');
$('.animateblock').addClass('animated');
};
I also tried creating a Template.destroyed section like so, but that didn't work either:
Template.home.destroyed=function(){
$('.animateblock').removeClass('animated');
};
I am using Meteor 1.2.0.1 and am also using iron router, but haven't been able to find a solution to add and remove classes with it. Any suggestions are appreciated!
I do something like this to call in jQuery on template loads:
Template.Messages.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('messageDB', function() {
$('.loader').delay(300).fadeOut('slow', function() {
$('.transition-wrapper').delay(200).fadeIn('slow');
});
});
});
});
Meteor Chef has a great resource on loading patterns here.

adding a slideshow to emberJS template page

EDIT: Did some more digging around and emberJS doesn't allow inline script execution. How would I go about creating a slideshow? Do I create a component?
I've only started out with emberJS. I've followed the guides on the website by Ember and looked on here to learn, but I've found myself in a bit of a dead end and I need your help!
This is the situation:
I want to add a slideshow to one of my templates. Now, to the best of my abilities I have added the slideshow .js and .css using 'BOWER INSTALL' and then edited my 'ember-cli-build.js' to reference the app.import for those two dependencies.
It's a basic website pages such as 'About Me', 'Services', 'Contact Us'. Nothing fancy. Say I want to add this slideshow to the 'Services' page, at first when I visit the site it loads up with no issues but when I switch between the templates/pages using {{#link-to}} function it disappears and won't load again.
Can anyone explain how I should add inline scripting on templates?
Sorry for the beginners question.
In order for me to run the slide show I need to execute the following script after the DOM elements on the page.
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
The HTML is as follows:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150/0889d8/000000" />
</li>
<li>
<img src="http://placehold.it/350x150/c1a4f0/ffffff" />
</li>
<li>
<img src="http://placehold.it/350x150/8b4513/000000" />
</li>
</ul>
</div>
I tried to use the slick addon, but ran into issues with it. So I created another ember addon that wraps the jquery unslider plugin. Check out ember-cli-unslider.
See the simple demo.
The un-slider component expects an array of slides. Within its block you must define the HTML content used for each slide.
{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}
In the above example, model could look like this:
[
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];
You can use an ember addon that already does that: ember-cli-slick
Install it using :
ember install ember-cli-slick
You can use it in your template like this:
{{#slick-slider autoplay=true arrows=false}}
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}
If you want to learn how to make a slideshow component look at the source code here:
https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js
This is just a wrapper component for the slick.js plugin . You would do the same for the flexslider plugin.

including the header and footer in jquery mobile multiple page site

I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:
<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>
Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?
Any advice on this would be great
Kyle
No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).
See documentation
I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...
Hope this helps
Have a look at the load() method in jQuery -> http://api.jquery.com/load/
Here is an exmaple :
$('#navigation').click(function() {
$('#page1').load('page1.html');
});
This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.
you can use .load() in jQuery
for example in every page you will have this:
<div data-role="footer" class="ui-footer"></div>
now build this function:
function goTo(pageURL, transitionType) {
$.mobile.changePage(pageURL, transitionType);
$('.ui-footer').load('assets/includes/footer.html');
}
now when you move between pages, try onclick (or from code if you like) call:
goTo('home.html','slideup');
that would do the trick (this is what I use)
you can do the same for the headers as well.
keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.
I hope this helps for your purpose

Categories