I currently use v-repeat to get my objects.
Inside i have one more v-repeat, but this should only repeat once. Is this possible?
<div v-repeat="companies">
{{name}}
<div v-repeat="image: images"> // should only repeat once
{{image.name}}
</div>
</div>
If each company has many images and you only want the first image to show, here is a solution:
<div v-repeat="company in companies">
{{company.name}}
<img v-attr="src: company.images[0].url">
{{company.images[0].name}}
</div>
I am not entirely sure if this is what you are after, but here goes:
<div v-repeat="company: companies">
{{company.name}}
<div>
<img v-attr="src: company.image.url"/>
{{company.image.name}}
</div>
</div>
this is assuming there is one image per company
Related
I'm making a forum web site(html+Vue3+php+sql), and there have a post system.
Mostly, when we need to custom dropdown object, it always needs to initial the fake dropdown object with js. (or have the other way that IDK)
for example, I'm using the css framework「Tocas-UI」,and I got the some html objects below:
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
And <div class="ts floating dropdown icon button">...</div> can be used js ts('.ts.dropdown:not(.basic)').dropdown(); to make it be a "dropdown" object.
Although it can only be used once to initial every object which have class .ts.dropdown, but I'm using the js framework Vue3, and when I using v-for to render every post (have one fake dropdown object in every post), it's not working on the object which are be created after I call the function .dropdown().
So I was tried to put ts('.ts.dropdown:not(.basic)').dropdown(); into loop, it stupid and also not working.
Here is the code in the v-for loop:
<template v-for="post in posts">
<div class="item">
<div class="ts mini circular image">
<img src="default.png">
</div>
<div class="content">
<div class="header">{{ post.poster.nickname || post.poster.username }}</div>
<div class="middoted meta">
<a>#{{ post.poster.username }}</a>
<div>{{ Init.timeToStatus(post.datetime) }}</div>
</div>
</div>
<div class="actions">
<div class="ts separated secondary icon buttons">
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
</div>
</div>
</div>
</template>
So the question is... How can I make those fake dropdown object be initial with ts('.ts.dropdown:not(.basic)').dropdown(); even have new post be added after page loaded.
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?
Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.
I have been trying my hands with Bootstrap framework.
1.In the grid alignment when we have 4 columns to work with we use the below row as per w3 schools
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
or two columns we divide the same by col-lg-6 and col-lg-6. What if,if I have some 5 column that I want to align? What value should I set to col-lg-* in 3 coloumns?
Also, What if, if I have a json file where I get the data from and I create columns run time? How do I handle that scenario here? For example I use Angular js to get the data and generate some list like the one in the example below,
<section class="row">
<ul>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Crack.png" />
<p>Some text</p>
</li>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Aad.png" />
<p>Some text</p>
</li>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Aa.png" />
<p>Some text</p>
</li>
</ul>
</section>
How do you think i can use ng-repeat and segregate the columns accordingly? I really hope I am clear in my question. Please help.
As for your first question, there are a handful of solutions - check out this SO question for details, Five equal columns in twitter bootstrap
For the second part, I might try something like this :
<div class="row" ng-repeat="item in placeholders">
<div ng-class="col-md-{{12 / placeholders.length | parseInt}}">col-md- {{12 / placeholders.length | parseInt}}</div>
</div>
Placeholders would be you JSON - so it just looks at the length and then runs a simple parseInt filter over it. This is all happening in an ng-class. The filter looks like so -
myApp.filter('parseInt', function () {
return function (a, b) {
return (parseInt(a))
}
});
A fiddle - http://jsfiddle.net/780gku24/
It's important to note though - this is assuming you aren't going to have more than 12 items in the JSON. If this does not work for you leave me a comment!
You can add or remove an item to the data to see it in action.
Please try col-lg-4. it would divide columns equally.
I am unable to get the correct title for this, please change the title if you get appropriate one :)
This is what i am having
<div class="container">
<div class="innerContainer">
<div>
Div content Here [ always either embed or object or image ]
</div>
xtra noise
</div>
<div class="innerContainer">
<div>
Div content Here
</div>
xtra noise
</div>
<div class="innerContainer">
<div>
Div content Here
</div>
xtra noise
</div>
</div>
Now, what i need is this
http://sketchfu.com/drawing/876520-what-do-i-need-
Note sketchfu is pathetic for drawing.
Is there any jQuery plugin which can do this?
Here is a list of content sliders: http://visionwidget.com/inspiration/web/295-jquery-content-sliders.html
I have used and like: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider