Mouse hover with ember - ember.js

I am new to Ember. I want when i hover the mouse over a .png file to be transparent and to exist there on the right corner an 'X' button and when you press it, it will be removed from the store. Any ideas or any example? I have these files:
showactivecamp.hbs
<style type="text/css">
.image {
width: 190px;
height: 190px;
opacity: 1;
}
.image:hover {
opacity: 0.3;
}
i.fa-remove {
#extend . image : hover;
color: #fff;
background-color: #808080;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 8px;
right: 8px;
padding: 2px;
z-index: 1;
cursor: pointer;
}
</style>
<div class="thmb-prev">
<button type="button" class="fa fa-remove" {{action "removeCampaign" on="click"}}>
</button>
<img src="/assets/images/photos/media2.png" class="image" alt="">
</div>
controllers\showactivecamp.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
needs: ['campaign'],
actions: {
removeCampaign: function (campaign) {
var camp = this.get('model');
camp.deleteRecord();
camp.save();
}
},
getactivecamp: function () {
return this.store.findAll('campaign');
}.property()
});
views\showactivecamp.js
import Ember from 'ember';
export default Ember.View.extend({
click: function (evt) {
this.get('controller').send('click', this.get('campaign'));
}
});

I believe something like this would be best handled with a CSS solution rather than creating the unnecessary views in Javascript
http://emberjs.jsbin.com/jecew/1

You posted your code but not mentioned about the issue. I am not sure what is the issue you are getting.
Have a look into this jsbin http://jsbin.com/xumomu/1. I have used FixtureAdapter.
UPDATE:
http://jsbin.com/xumomu/2/
I have wrapped image and close icon in a view called 'image'. X icon will be shown on mouse enter and will be hidden on mouse leave using jQuery.
As Ember guide says, Use View when you need sophisticated handling of user events.
I suggest you to go through documentation to get clear idea about View and Event handling in ember.

Related

How to create a pop up for blogger template

I have a question, how can I create a costume pop up,so when user visit it show on screen for some minutes.
I have tired creating a pop that show image and text when visitor come.
You can do something like the following
Create an element with a unique id and place it where you want in
your template
Style the element with CSS
Use JavaScript to hide the element after a desired time
Here is the code
<div id="msg">welcome, I will disappear after 5 sec</div>
<style>
#msg {
position: fixed;
padding: 2em;
background: black;
color: white;
z-index: 100000;
}
</style>
<script>
setTimeout(function(){
document.getElementById('msg').style.display = 'none';
}, 5000);
</script>

Django Fullcalendar - More than one calendar in App

Sice i managed to implement Fullcalendar's functionality into my Django app, I have another question.
Is it possible to render more than one Fullcalendar into my html page, depending of how many Calendars are made inside the database. And, i need them to be rendered HORIZONTALLY.
I suppose that i need to change my div's id to 'calendar2' for example. But what should i change inside the initializer?
This is full script and style from my calendar.
<script>
document.addEventListener('DOMContentLoaded', function () {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
minTime: "07:00:00",
maxTime: "22:00:00",
businessHours: {
startTime: '08:00', // a start time (10am in this example)
endTime: '21:00', // an end time (6pm in this example)
},
height: 'auto',
locale: 'sr',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
defaultView: 'timeGridDay',
header: {
left: 'today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: false, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{% for i in events %}
{
title: "{{ i.event_name}}",
start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i" }}',
end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
},
{% endfor %}
]
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<body>
<div id='calendar'></div>
</body>
I'll pass the answer from the comment section.
Just create as many div elements as you need, and attach a calendar to each one (let calendarEl = document.getElementById('calendar'); controls which element the calendar is attached to, so you just need that to be dynamic, or repeated).
And flex style helped me to put the next to each other, horizontally

Angular2 unit testing - why nativeElement has empty CSSStyleDeclaration

I'm trying to test a simple header component that has a button and when being focused - opens a dropdown using just css visibility property.
This is the html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
This is the scss style:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
And this is the test:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
When I run the test I can see that console.log(dropdownElement) exists and that console.log(button.nativeElement) returns the CSSStyleDeclaration object - but ALL the properties have an empty string as a value:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
So basically what I need is to trigger the focus event on the button and then see if the value of the dropdown's css/style property "visibility" is "visible".
I can't figure what's wrong, cause i can see that everything is rendering fine in Karma-Debug but all the style properties are empty... any idea what's the problem?
I've had similar problem in runtime (not tests).
Style property is static and based on initial style attribute on html element so this is not updated dynamically.
Solution is to use Window.getComputedStyle(). This function calculates (current!) styles from stylesheets.

ember bind-attr class is not being set by controller

I'm creating a master-detail table.
Before an item has been chosen, the details should not be visible, only becoming visible on clicking of an item.
The reason I'm using a class is because the table is normally 100% width, and it changes size when the detail pops up. This is not implemented yet. Right now, I just want the 'with-details' class to be inserted into the div when I click in the < li >
Here is a rough twiddle:
https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4
In my template, the < li > has an action:
<li {{action 'showDetails'}}>
which fires the showDetails action in my controller (I know it's firing because of the :) in console):
withDetails: false,
actions: {
showDetails: function() {
console.log(":)");
this.set('withDetails', true);
}
}
which should add the with-detail class to my details div:
<div {{bind-attr class=":game-details withDetails"}} >
which should match my CSS:
.game-details {
display: none;
border: 1px solid red;
}
.game-details.with-details {
display: block;
border: 1px solid green;
}
It should be that easy. What am I missing?
[ EDIT ] I just learned this trick:
Wrong:
<div class="game-details" {{bind-attr class="withDetails"}}>
Right:
<div {{bind-attr class=":game-details withDetails"}}>
which shows the div, but does not attach a with-details class I can target.
bind-attr is deprecated since 1.13 and disabled since 2.0. Instead, you should use embedded {{if}} in your class attribute, like so:
<div class="game-details {{if withDetails "with-details"}}">
{{outlet}}
</div>

orbit slideshow custom next prev buttons links left right arrows

I am using zurb foundation orbit slideshow. The next and the prev buttons or links on the left and right edge of the page is the default black triangle. Please have a look at this test page:
http://www.endsnore.com/_test1b/index.aspx
How do I customize the next and prev buttons or links? How do I add my own arrow code: ‹ and › OR add my own custom arrow images
like these orange left and right arrows here:
http://www.getaveo.com/index.aspx
Please provide exact code example. I would appreciate it. Thank you very much in advance!
Working with orbit I found a pretty nice solution: using the :before on the .orbit-prev span and .orbit-next span tag via CSS you can modify the navigation buttons.
I do not think you can add images as button without editing the js code of the slider, but this solution works nicely, and you can obviously tweak it for your needs
See the jsFiddle here: http://jsfiddle.net/endorama/5SHz5/3/
Basically you need to add this CSS, which remove the arrows ( are borders on the span element ) and replace them with a gliph ( see the content: "..." )
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
color: red;
border: none;
font-size: 70px;
text-indent: 0;
margin-top: -32px;
}
.orbit-container .orbit-prev {
background-color: transparent;
}
.orbit-container .orbit-prev span:before {
content: "\2039";
}
.orbit-container .orbit-next {
background-color: transparent;
}
.orbit-container .orbit-next span:before {
content: "\203A";
}
Hope this helps, cheers :)
NOTE: Be aware that if stack_on_small is true you content will be stacked and the arrows hidden. I didn't tweak this behaviour because seems logical to me. just disable this option when you initialize Orbit to solve this problem.
My Dear friends! Please find complete solution for your troubles of ORBIT.
It takes 5 min to make custom buttons(image or chevron or font-"Font Awesome") as you navigation arrows.
In your js:
$(".next-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-next").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
$(".prev-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-prev").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
In your css:
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
.next-slide {/* PUT YOUR STyLES HERE*/}
.prev-slide {/* PUT YOUR STyLES HERE*/}
If you are using font awesom:
same js as above
css:
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
html:
<span class='prev-slide'><i class='icon-chevron-left'></i></span>
<span class='next-slide'><i class='icon-chevron-right'></i></span>
Thats it! Rank me if you like it!
I had success with stacey.mosier's answer and was able to change my arrows to an image using the CSS content property. Using Foundation v5.2.2
Approach #1
This is what working code for a single class looks like:
.orbit-next {
content: url("Homepage/Homepage_Banner_Arrow_Next_on_retina.png");
width: 16px !important;
height: 62px !important;
margin-right: 20px;
}
I set the width and height of the .orbit-next class to be equal to that of the image I'm adding.
And for the hover styling:
.orbit-container .orbit-next:hover {
content: url("Homepage/Homepage_Banner_Arrow_Next_off_retina.png";
background-color: transparent; //so there's no background effect
For .orbit-previous the rules are basically the same as above (except margin-right becomes margin-left and you use the prev arrow path instead of the next)
Approach #2
To stay DRY I instead implemented a "multiple selector" and now only need one arrow asset by rotating the current one via css transform
.orbit-next, orbit-prev { //All the above rules except the margin }
.orbit-next { margin-right: 20px; }
.orbit-prev { margin-left: 20px; transform:rotate(180deg); }
.orbit-container .orbit-next:hover, .orbit-container .orbit-prev:hover {
//the above hover rules
}
I anticipate the need to scale/hide the size of the arrows based on the column width currently active, something to consider, but beyond the scope of this question. Hope this helped!
Obrit comes with default classes. You can customize the classes:
<ul data-orbit data-options="next_class: my_next_class; prev_class: my_prev_class;">
...
</ul>
The default classes .next_class and .prev_class have a text-indent that is pushing the text out of the window.
If you are wanting to replace the content, use the css content: rule.
I think this is a little more straightforward:
For Foundation 5 - this is your jQuery:
$( "a.orbit-prev > span " ).replaceWith( "<img src='images/left_arrow.png' width='68' height='78' />" );
$( "a.orbit-next > span" ).replaceWith( "<img src='images/right_arrow.png' width='68' height='78' />" );
Replace the image URL with the URL of your own image, and the height/width of your own image height/width. To use a font icon, I would do something like this:
$( "a.orbit-prev > span " ).replaceWith( "<span><i class='icon-chevron-left'></i></span>" );
$( "a.orbit-next > span" ).replaceWith( "<span><i class='icon-chevron-right'></i></span>" );
You'll need to overwrite the default css styles too to use images:
.orbit-container .orbit-prev, .orbit-container .orbit-next {
text-indent: 0px !important;
line-height: 78px;
height: 78px;
width: 68px;
}
Keep the text indent at 0, and use your own heights/widths. For an icon font, I didn't try it but I think you should be able to use the existing CSS with no problem.
You'll probably want to remove the hover state as well, but maybe not:
.orbit-container .orbit-prev:hover, .orbit-container .orbit-next:hover {
background-color: transparent; }