I need to use data-src attribute in < div > to show an image but in react this attribute for me is not working, is there any way to fix that?
<div
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="600"
data-aos-once="true"
>
<a href="#">
<div data-src="../../contents/images/01.jpg">
<div>
//some text here
</div>
</div>
</a>
</div>
When I tested it in simple html it is working and no problem and image shows correctly, but in react it is not Ok...
Related
I my react app, I am using react markdown for rendering the blog content. How can we add multiple classes to the ReactMarkdown. At the moment I have used dataArea class alone, but i would need to use below classes for styling purpose. Could someone please advise ?
.blogImageSection
.dataArea
.dataDate
.tags
.readmoreLink
.dataArea p
. views
csb link for reference : https://codesandbox.io/s/great-bardeen-9lsog5?file=/src/App.js
// react markdown usage:
{ popularResults.map (({id, blogdetails, tags, createdAt }) => (
<ReactMarkdown className='dataArea' remarkPlugins={[remarkGfm]}>{blogdetails}
</ReactMarkdown>
))}
This is the normal blog where I have used the above classes without using react markdown
<a key={id} href="my url">
<div key={id} className='blogImageSection'>
<img alt="id" src={photo} />
<div key={id} className='dataArea'>
<span key={id} className='dataDate'>{date}</span>
<span className='tags'>cypress</span>
<h3>{heading}</h3>
<p>
Best heading added here.
The most relevant data added here.
Greatest of all time. Print the whole text here.
Ideas are always usefull....
</p>
<a href="_blank" className="readmoreLink">
Read more →
</a>
<span className='views'>
{topViews > 999 ? (topViews / 1000).toFixed(2) + "K" : topViews}
</span>
</div>
</div>
</a>
you can add all classes like this:
className='dataArea blogImageSection dataArea dataDate tags readmoreLink dataArea views'
Im working in React JS and it seems that the jsx file doesnt recognize the att. Is that possible? Here is my code:
<div className="LoginFormContainer">
<h1>
Welcome to <strong> {APP_TITLE} </strong>
</h1>
</div>
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I'm trying to open a modal using SimpleModal OSX, and the values for some of the attributes are assigned using AngularJS. However, when I click an item to open a new modal it doesn't work and the page reloads. Here's the code to make this clear
<li ng-repeat="news in newsItems" class="some class">
<a class="osx" href="#" data-page={{news.dataPageUrl}}>
<article>
<header>
<span class="itemtype">{{news.dateHeader}}</span>
<h1>{{news.header}}</h1>
</header>
<img height="145" src={{news.imageUrl}} alt={{news.imageHeader}} />
</article>
</a>
</li>
The dynamic items appear in my page, so the ng-repeat directive works. I added a static item and it opens a new modal without issues. The osx.js script is loaded at the end of the body tag. What am I doing wrong?