pop up window opeing in rails? - ruby-on-rails-3

I am opeing a new pop up window like this in rails 3
<%= link_to image_tag("/images/signin_lin.jpg"), linkedin_connect_path, :popup => true %>
also i tried this
link_to image_tag("/images/signin_lin.jpg"), { :action => "connect" }, :popup => ['new_window','height=300,width=600']
first one does open a new window and the page comes in full size when i use the second one i get the new window but the parent window becomes blank and once the even is completed than the controller goes to new pop up window where it's size is very small.
what i want is once the new pop up window is opened and the action is done, the pop up window should be closed and the controll should come to the parent window.
Please help me.

Use some CSS and Javascript!
Here's an example you can play with: http://jsfiddle.net/cdpZg/
Copying it here, just in case.
HTML:
<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div>I a piece of useless information. No use hovering over me.</div>
CSS:
#popup {
height: 50px;
width: 200px;
text-align: center;
vertical-align:middle;
background-color: cornflowerblue;
color: white;
display: none;
padding-top: 8px;
position: absolute;
}
Javascript:
$(document).ready(function() {
$('#user').hover(function() {
$('#popup').show();
}, function() {
$('#popup').hide();
});
});

Related

Div (contains list of items) not close when clicked outside

Please open https://jsfiddle.net/gfmyt9u8/31/
When user clicks outside <section> tag area, then the opened div overlay panel should be closed.
Steps to produce scenario :
Click "Please Select Options"
Now, click first item from opened overlay panel (by doing this, the panel got closed automatically)
Next, Click inside the blue color border div (This shows "Please Select Options" as label) again
Now, try to click outside the "blue color border div" and "opened div overlay panel beneath" both
overlay panel will not close
Actual Result : overlay panel is not closing
Expected Result : overlay panel should close when clicked outside the "blue color border div" and "open overlay panel
beneath"
Use the mounted lifecycle hook to add a click event listener to check if the click event is outside the element or not, and based on that hide the element.
A working example:
new Vue({
el: '#app',
data: {
displayList: false,
cat: ['A', 'B']
},
methods: {
itemSelect(o) {
this.displayList = false;
}
},
mounted: function () {
// Listen to all clicks on the document
document.addEventListener("click", function(event) {
// If the click inside the element, do nothing
if (event.target.closest(".section-main")) return;
// If the clicks outside the element, hide it!
this.displayList = false;
}.bind(this));
}
});
.display-no-selected {
cursor: text;
width: 300px;
height: 25px;
border: solid 2px blue;
}
.display-list {
border: solid 1px wheat;
width: 300px;
max-height: 150px;
overflow-y: auto;
}
.toggle-list {
display: none;
}
ul, .selected-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.inner-ul li {
cursor: pointer;
font-weight: normal;
}
ul.inner-ul li:hover {
background-color: wheat;
}
.default-highlight {
background-color: wheat;
}
ul.inner-ul li span {
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section class="section-main">
<div class="display-no-selected" #click="displayList=true"> Please Select Options
</div>
<div class="display-list"
v-bind:class="{'toggle-list': !displayList}">
<ul class="inner-first-ul inner-ul">
<li v-for="o in cat" #click="itemSelect(o)">
<span>{{o}}</span>
</li>
</ul>
</div>
</section>
</div>

datatables with custom tooltip per cell

I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.

Bootstrap datatable: search filter, clear icon issue

datatables.min.css datatables.min.js 2.1.4 jquery, 3.3.5 bootstrap, 1.10.8 datatables
Clear icon does not appear on search filter input for chrome, firefox, but it appears in IE10 and later. Can be easily reproduced in bootstrap sample (https://www.datatables.net/manual/styling/bootstrap ).
When I add my implementation of clear icon the default one also appears in IE.
Is there a simple workaround to turn off extra clear icon for some browsers?
Bootstrap's styling removes the clear icon from the search input from bootstrap datatable. This is part of Bootstrap's default behaviour.
Add this to your CSS:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
It will override Bootstrap's hiding of the clear button.
This is html5 issue:
/* Disable browser close icon for IE */
input[type="search"]::-ms-clear { display: none; width : 0; height: 0; }
input[type="search"]::-ms-reveal { display: none; width : 0; height: 0; }
/* Disable browser close icon for Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
Here is an article for more details on html5 input[type="search"] disabling
This solution worked for me:
<script>
$(document).ready(function() {
$('.dataTables_filter input').addClass('searchinput');
$('.dataTables_filter input').attr('placeholder', 'Buscar');
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
var table = $('#dt_basic').DataTable();
//clear datatable
table
.search('')
.columns().search('')
.draw();
});
});
</script>
css:
.searchclear {
float:left;
right:22px;
top: 8px;
margin: auto;
font-size: 18px;
cursor: pointer;
color: #ccc;
}
and in jquery.dataTables.min.js you need add the icon remove-circle after input:
original code
'<input type="search" '+c.sFilterInput+'"/>'
new code
<input type="search" '+c.sFilterInput+'"/><span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>'
example image

no closing "X" with inline content

I'm using magnificPopup twice on the page: www.thisismaceo.com/test.php
first button (VIDEO, at bottom) opens the lightbox popup and has a close "x"
second button (AUDIO) opens the lightbox popup but has no close "x".
I tried so many options, including
inline: {
markup: '<div class="soundcloud-popup">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-content"></div>'+
'</div>'
}
to no avail.
any clues?
Look closer :)
#soundcloudplayer {
width: 80%;
height: 300px;
position: relative;
background: #FFF;
margin: 0 auto;
}

ASP.NET MVC 4 Default template has a different syntax for logout in _LoginPartial.cshtml

I am using ASP.NET MVC 4 for the first time, so I started with the default template.
In the _LoginPartial.cshmtl for Log off link I found the below code
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
#Html.AntiForgeryToken()
Log off
}
I was expecting a code like the one below, which I have been using in MVC 3.
#Html.ActionLink("Log off", "LogOff", "Account")
Please can someone help me understand as to why this is necessary, and its advantages if any. Thanks
The reason for the new syntax is that it follows a more RESTful syntax. By logging out you are changing a state on the user (hence the POST action).
While making MVC 4 restful, the default template doesn't allow users with JavaScript disabled a way to log out. Here is the fix for that problem.
Note I also blogged about this issue here: http://www.shiningtreasures.com/post/2013/08/09/cannot-log-out-of-aspnet-mvc4-without-javascript
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
#Html.AntiForgeryToken()
<a id="logout" href="javascript:document.getElementById('logoutForm').submit()" style="display:none">Log Off</a>
<script>
//<!--
var l = document.getElementById('logout');
if (typeof(l) != 'undefined' && l != null)
l.style.display = "inline";
//-->
</script>
<noscript>
<input type="submit" value="Log Off" />
</noscript>
}
Basically, it falls back to a submit button rather than a link when JavaScript is not available. We still use a POST in all cases.
One other small problem - the CSS for the template makes the button look different than a link. Here is the fix for the CSS to style the logout button so it looks the same as the other "buttons" that are actually anchor tags.
/* drop this in just above "info and errors" */
#logoutForm input[type="submit"],
#logoutForm input[type="button"],
#logoutForm button
{
background-color: #d3dce0;
color: #333;
border: none;
border: 0px;
font-size: 1em;
font-weight: 400;
margin: -4px 3px -4px 10px;
padding: 2px 3px;
text-decoration: none;
font-family: inherit;
outline: medium none;
}
/* for mobile styles - you need to drop this one in right after the other
#login styles in the mobile block (near the bottom of the file) */
#login input[type="submit"],
#login input[type="button"],
#login button
{
background: none;
color: #999;
border: none;
border: 0px;
font-size: 1em;
font-weight: 600;
margin: -4px 3px -4px 6px;
padding: 0;
text-decoration: none;
font-family: inherit;
outline: medium none;
}
There's no big difference. MVC4 uses a HTML-form to logout, which is submitted via the javascript.
The advantage is that the new way (with the form) uses javascript to submit the form, which is why the page does not have to reload.
I'm pretty sure the only reason they used JavaScript here is because the css style of a submit button wouldn't have matched the css style of the "login" button which is an anchor tag created by the HTML helper with this code:
#Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" }).
The following will create the exact same behavior in the app:
<input type="submit" value="Log Off" />
but it looks horrible.
Of course they can't use the HTML helper ActionLink for the log off button anymore because this is a form that needs to be POSTed so that the AntiForgeryToken can be validated.
So, they needed the following:
An anchor tag for the log off link so that it will style the same as the log in link.
A button that can submit the form so that the AntiForgeryToken can be validated.
Hench an anchor tag that triggers a form postback via the explicit .submit() JavaScript.
"The advantage is that the new way (with the form) uses javascript to submit the form, which is why the page does not have to reload" ... (user1797792)
This is completely untrue as Html.BeginForm always triggers postback, Ajax.BeginForm is the async form helper that does not trigger post back
I prefer the old action link style as does not mess up css but from reviewing the function, it appears the actionlink has been replaced with form so that a AntiForgeryToken can be included in the request and would prevent cross site scripting blocking you out of your own account or something along those lines.
function btnContinueClick() {
debugger
$.ajax({
url: '#Url.Action("BIAssessmentTest", "BI")',
type: 'Post',
cache: false,
success: function (data) {
window.location.href = '#Url.Action("BIAssessQuestions", "BI")';
},
error: function (err) {
debugger
alert("hi");
}
});
}