I have a jquery ui dialog which is initialised like this
jQuery("#dialog-message").dialog({
autoOpen: false,
modal: true,
width:500,
buttons: { Ok: function () {jQuery(this).dialog("close"); }}
});
This is opened when clicking on specified span id as given below
jQuery(document).delegate("#samno","click",function () {
var usin=jQuery(this).text();
jQuery.post("scripts/sample_counts.php",{"usin":usin}, function(data) {
jQuery('#dialog-message').html(data);
jQuery('#dialog-message').dialog('open');
return false;
});
});
Actual div of this message is this:
<div id="dialog-message" class="dialog" title="Counting Data"></div>
Following css are also there in the page:
.no-close .ui-dialog-titlebar-close { display: none;}
div.ui-dialog {
font-size:12px;
color:#333333;
}
.ui-dialog.table {
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
The data received from post request contains a table. I defined a class called msg_tble and tried to apply this on the table. But it is not working.
Any idea how to use css for the table in the dialog box?
As suggested by Arun P Johny I am sharing the table markup
echo "<table><tr><th>Counting Date</th><th>System ID</th><th>Counting Time(Sec)</th><th>CPM</th></tr>";
while($data2=mysql_fetch_array($result3)){
echo "<tr>";
echo "<td>".$data2['count_date']."</ts>";
echo "<td>".$data2['counter_id']."</td>";
echo "<td>".$data2['count_time']."</td>";
echo "<td>".$data2['cpm']."</td>";
echo "</tr>";
}
echo "</table>";
Instead of
.ui-dialog.table {
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
Try:
#dialog-message table {
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
With jQueryUI dialogs, the dialog contents behave exactly as if they are part of the "dialog" DIV.
That is, whatever div you use for the dialog -- any styling you do on that div, or on the contents of that div, will be reflected in the dialog. Just style the contents as part of the #dialog-message div and forget about the fact that they are in a dialog, and true happiness will be yours.
jsFiddle Demo
Edit:
I just read the comments below your question and I see that Austin Mullins has a solution that should work, and it answers your question about adding a class to the table-within-the-dialog. I hope he will add it as an answer so it can be upvoted.
But yes, it really is that simple. Quiet appreciation for John R
The effectiveness of this approach depends on what exactly is returned by "sample_counts.php". In my testing on JSFiddle, I discovered two different approaches that work in different situations.
If the <table> element is the root of the document, the following works:
function(data) {
$dialog = jQuery('#dialog-message');
$data = $(data);
$data.addClass("msg-table");
$dialog.html($data).dialog('open');
return false;
}
In this test, I had the echo endpoint return the following HTML:
<table>
<tr><th>Usin</th></tr>
<tr><td>Samno</td></tr>
</table>
Notice that, in this case, we expect the table by itself with no surrounding containers. If, on the other hand, the table is part of a larger document, the following works:
function(data) {
$dialog = jQuery('#dialog-message');
$data = $(data).find("table");
$data.addClass("msg-table");
$dialog.html($data).dialog('open');
return false;
}
Note the use of the find() function to get to the first <table> element. Here's the example HTML used to test it:
<div>
<table>
<tr><th>Usin</th></tr>
<tr><td>Samno</td></tr>
</table>
</div>
// Use 'dialogClass' property.
$( ".selector" ).dialog({
dialogClass: "alert"
});
I simply added the following css in the main page
div#dialog-message table {
margin: 1em 0;
border-collapse: collapse;
}
div#dialog-message table td, div#dialog-message table th {
border: 1px solid #eee;
border-color:#CC0033;
padding: .6em 10px;
text-align: left;
}
this solved the problem. No other changes made. Thank you every one who gave suggestions/answers
Related
Basically I want to be able to remove margins below and above the 'non' first and last child duplicates. So I have tried to target the row that has duplicate id's.. in this case #Day2 and #Day6, then I've tried to select the :first-child and the :last-child
tr#Day2:first-child td, tr#Day6:first-child td { margin-top: 0px !important; }
tr#Day2:last-child td, tr#Day6:last-child td { margin-bottom: 0px !important; }
I'm not sure if a css only way is able to achieve what I want or if I'm on a somewhat right path with what I'm currently doing.
My attempt to use jquery to do this is:
<script>
$(document).ready(function () {
$(document).ajaxComplete(function () {
var seen = {};
$('table tr td').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).css("margin-bottom", "0px");
else
seen[txt] = true;
});
});
});
</script>
Though this doesn't seem to even remove the margin of a duplicate, nor does my css attempt I'm sure there is a way. Perhaps I cannot use :first-child and :last-child with a tr id? If so is there any other way to achieve what I want?
I greatly appreciate any help, thank you.
JSFiddle
Please view my example here.
**
Solution
**
All achieved without the need for jQuery. Please find the working edition here.
Thanks #Marcin for pointing me towards the solution.
JSFiddle: View Solution
There is only workaround for this:
.Day2 { margin: 0px 0px 5px 0px; }
.Day2 ~ .Day2 td { margin-top: 5px; }
This sets only bottom margin on each .Day2 and then, if there is any .Day2 before, sets margin-top to 5px;
Taken from CSS3 selector :first-of-type with class name?
You shouldn't use the same id on more than one element. Use class instead (for example class="day1").
I have a dynamic table where i have hide after displaying first few words from a big text, if the user want to read the complete data he use to click view more button to read the complete data it works fine but the problem is how to show view more only for the rows which has overflowed text in it.
Php solution
simply in php we can use strlen() and can give condition like
if(strlen($data) > 100 ){
make visible
}
but cant assume how many chars exactly fit in the div because users may use enter so that the text count may vary so it wont works.
JavaScript solution
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
here i can find which div is overflowing, but since table was dynamic i don't know the exact ids i tried something like
<tr>
<td>
<div id="hidden_field_{$row['his_id']}">{$row['his_data']}</div>
</td>
<td>
<br/>
<?php
$check_overflow=echo "<script>checkOverflow(document.getElementById('hidden_field_".{$row['his_id']}."'));</script>";
if($check_overflow=="true"){
?>
<a id="get_view_more_{$row['his_id']}" onclick="view_more({$row['his_id'];});">View More</a>
<?php } ?>
</td>
</tr>
this function works fine outside php on the bottom of the page
<script>
alert(checkOverflow(document.getElementById('hidden_field_1')));</script>
you can use ellipsis.
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
#div2:hover {
width: auto;
overflow: visible;
border: 1px solid #000000;
}
<p>This div uses "text-overflow:ellipsis": when you hover this it's visible</p>
<div id="div2">This is some long text that will not fit in the box</div>
just like this way.
I have a contenteditable tag, and I want my users to be able to type code into it. However, when I type into the contenteditable tag, my code shows up as text rather than an actual element. Is there a way for a user to create a full, working HTML element in a contenteditable box? I know it is possible for the client to insert code using javascript, but what about users who do not have access to javascript? How could users get code such as buttons inside a contenteditable box?
<p contenteditable="true">Try typing code in here as user, code will only be text...</p>
Is there a javascript way to accomplish this without JQUERY?
EDIT
I spent a long time searching for answers on Google, but nothing came up. The best solution I've gotten at this point has been #Dekel's comment on CKEditor. If there is another solution, I want to hear it. If there isn't, I'm sticking to CKEditor. I don't have much time, so I need a solution fast.
MORE EDIT =D
I recently developed my own answer to my question by looking at #Brandon's .replace answer (which only worked for client-coding, not user-coding) and modifying it to work with user-coding.
This isn't pretty, but you could make it work if you are looking to add HTML only. Otherwise an inline editor might work best.
var el = document.querySelector('p')
el.addEventListener('blur', function() {
var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
var html = this.innerHTML.replace(/&([^;]+);/g, (m, c) => map[c]);
this.innerHTML = html;
});
<p contenteditable="true">Try typing <b>code</b> in here as user, code will only be text...</p>
This answer is similar to #Brandon's idea, but is much more simple.
https://jsfiddle.net/azopqLe4/
<iframe width="100%" height="300" src="//jsfiddle.net/azopqLe4/embedded/js,html,result/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
function convertit() {
var convet = document.getElementById("convet");
var text = convet.innerHTML;
var newtext;
newtext = text.replace(/</g, "<").replace(/>/g, ">");
convet.innerHTML = newtext;
}
//this version runs onrightclick =D
<p contenteditable="true" oncontextmenu="convertit();" id="convet">
Type some code here, then right-click... =D
</p>
In the second snippet, I typed <b>Test</b>, right-clicked it, and it became Test! My answer works through simple array replacement methods, although it is frustrating and time-wasting to keep right-clicking all the time. To prevent the actual contextmenu from popping up, just add .preventDefault().
You can't insert code, but you can insert DOMElements with JS. No need for jQuery.
var element=document.createElement("button");
element.innerHTML="Hello";
document.getElementById("yourContentEditable").append(element);
The idea with this would be to have a button to prompt for the code and insert it. Something like this:
(It is very ugly and buggy but it's just an example I just wrote)
var editorSelection=null;
function openCodePopup() {
//Store cursor position before editor loses focus
editorSelection=getEditorSelection();
//Open the popup
document.querySelector("#codePopup").style.display="block";
var ta=document.querySelector("#userCode");
ta.value="";
ta.focus();
}
function closeCodePopup() {
document.querySelector("#codePopup").style.display="none";
}
function insertCode() {
var code=document.querySelector("#userCode").value;
closeCodePopup();
if(code=="") return;
insertIntoEditor(html2dom(code));
}
function getEditorSelection() {
//TODO make crossbrowser
//TODO (VERY IMPORTANT) validate if selection is whitin the editor
var sel=window.getSelection();
if(sel.rangeCount) return sel.getRangeAt(0);
return null;
}
function insertIntoEditor(dom) {
if(editorSelection) {
editorSelection.deleteContents();
editorSelection.insertNode(dom);
} else {
//Insert at the end
document.querySelector("#editor").append(dom);
}
}
function html2dom(code) {
//A lazy way to convert html to DOMElements, you can use jQuery or any other
var foo=document.createElement('div'); //or you could use an inline element
foo.contentEditable=false;
foo.innerHTML=code;
return foo;
}
#editor {
height: 180px;
overflow: auto;
border: 1px solid #ccc;
}
#toolbar {
position: relative;
}
#codePopup {
position: absolute;
left: 10px;
top: 15px;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
display: none;
}
#userCode {
display: block;
width: 200px;
height: 100px;
}
<div id="toolbar">
<button onclick="openCodePopup()"></></button>
<div id="codePopup">
<textarea id="userCode" placeholder="Type code here"></textarea>
<button onclick="insertCode()">Ok</button>
<button onclick="closeCodePopup()">Cancel</button>
</div>
</div>
<div contenteditable="true" id="editor"></div>
With the same idea you could create other options to convert element (example, text->link, etc.).
I am creating a menu in php running off of input from a JSON file. The issue i'm running into is that i want the title to change color to green once they click anywhere in the div class "menu-item". Once the color is green I would also like for them to be able to click it and have it return to it's original state. I understand i need to utilize javascript or Jquery for this option but couldn't find it in any documentation. I feel like I'm missing something small and have looked all over but haven't been able to figure it out. any help is appreciated.
foreach ($obj as $menu_item) {
echo '<div class="menu-item">';
echo '<img class="food-item" src="'.$menu_item->{'image-url'}.'"><br/>';
echo '<p class="title" onclick="changeColor("title"); return false;">'.$menu_item->name.'</p><br/>';
echo '$'.$menu_item->price.'<br/>';
echo $menu_item->Description.'<br/>';
echo '</div>';
}
Jquery toggle will do it for you, see fiddle: https://jsfiddle.net/c259LrpL/24/
$(".menu-item").click(function() {
$(this).toggleClass("red");
});
CSS example:
.menu-item {
background-color: blue;
color: white;
}
.menu-item.red {
background-color: red;
color: blue;
}
I have an issue with a JQuery animation I've been trying to implement within my site.
The general idea is that I have a footer on my page divided into two TDs. Section 1 is an icon that changes depending on the message that is scrolling by in section two.
My HTML essentially looks like this:
<div id="footer">
<div class="box-ticker round">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:60px;">
<tr>
<td style="width:12%;background:#6dc5ed;" align="center" valign="middle"><img id="image_scroll" /></td>
<td style="width:88%;background:#9f88e2;padding;10px" class="biggest" valign="middle">
<div id="ticker"></div>
</td>
</tr>
</table>
</div>
</div>
My CODE to update this:
EDIT: The variable "html" is a poorly named array of JSON. It contains the data which I'm populating. Eg: html[0] = {'title':'this is a message', 'icon':'icon.png'}
$('#ticker').html("<span class='scrollingtext' id='scroll_text'></span>");
cur_index=0;
max_index=html.length;
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
if (cur_index >= max_index) { cur_index = 0; }
obj = JSON.parse(html[cur_index]);
$('#image_scroll').attr('src',"img/"+obj.icon);
$('#scroll_text').html(obj.title);
var scrolling_text = $('#scroll_text');
var text_container = $('#ticker');
var tw = scrolling_text.width();
var ww = text_container.width();
scrolling_text.css({ right: -tw });
scrolling_text.animate({ right: ww }, 30000, 'linear', function() {
cur_index++;
scrolling_text.trigger('marquee');
});
}).trigger('marquee');
});
And finally my CSS:
.box-ticker{
width:100%;
height:56px;
background:#d44d4d;
}
.round { border-radius: 20px; }
.scrollingtext{
position:absolute;
vertical-align:middle;
white-space:nowrap;
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
font-size:30px;
float: right;
color:#FFFFFF;
}
The problem is that when the message scrolls across the screen it does not appear to be locked into the "ticker" DIV at all but just scrolls directly across the bottom of the page and appears to just ignore every DIV tag I have there. When I observe the object updating within the chrome console the HTML seems to be appearing in the correct place.
There is also a weird issue with what seem to be trailing dots following the animation along. This does not seem to happen within firefox.
Any suggestions would be greatly appreciated.
Thank you!
Okay found it. Your problem appears to be your CSS. See working example here
Add this to your CSS
#ticker{width:100%;overflow:hidden; display:block; }
.scrollingtext{
position:relative;
vertical-align:middle;
white-space:nowrap;
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
font-size:30px;
float: right;
color:#FFFFFF;
}
Note: I had to make change to your html object to make it work with jsfiddle. You can ignore the js code if you have no problem with yours.