While modifying a phpBB forum, we need to create a custom topic/posts view.
Please see the image below for details
The real problem is Partitions 1 and 2.
The code am using is updated code
The result is -
what ever you set your CSS just add javascript code # the end of your file like ...
<script type="text/javascript">
var h1=document.getElementById('div1').offsetHeight;
var h2=document.getElementById('div2').offsetHeight;
var h3=document.getElementById('div3').offsetHeight;
var h4=parseInt(h2)+parseInt(h3)+"px";
document.getElementById('div1').style.height=h4;
</script>
i run this code, it work for me.
Related
I am a beginner and I have a static page where I want to include other Html files. Like the header, footer, some buttons, and a form that I am using on more than one page.
I am not allowed to use the server-side for this exercise. So I tried using jQuery but it didn't work.
But I also would like some way to include these files without making a wrapper for them. But will be happy even with the wrapper divs if you guys help me with that.
I have not used jQuery before but I feel like a have tried every way that I found. You can see all of them below.
I am using jQuery 3.5.1.min if it is of importance.
$(".header").load("_header.html")
$(function () {
$(".header").load("_header.html");
});
function unWrapPlaceholder() {
$(this).contents().unwrap();
}
$(function () {
$("#header").load("_header.html", unWrapPlaceholder);
});
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '../views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
<div data-include="_header"></div>
I don't want to use the object tag or iframes. Are there any suggestions or corrections you can give me?
I would really appreciate the help.
The file location was the problem! In the end I used the second jQuery code.
I am attempting to implement a bootstrap 4 datatable, and cannot seem to get it to work. In My head I have the required CSS
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">
I then have the following required scripts below:
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
I then call the scripts onto my standard formatted HTML table, with the correct ID as follows:
<script>
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
None of this However works, and the table displays using normal Bootstrap 4 Table, with no search/sorting function. Could anyone explain what I'm doing wrong here?
Thanks
EDIT: I tried this unfortunately it seemed to break the CSS for the whole site. All I really want to do is only show the first 10 rows of my bootstrap 4 table, but every time I google it it comes up with results for data tables. Is there any way to show just the first 10 rows of a standard bootstrap 4 table?
It seems like you haven't imported Jquery in your HTML File.
you need to use 3 files for Data Tables as follow
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js
But you only added
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js
Import JQuery before
jquery.dataTables.min.js and
dataTables.bootstrap4.min.js
after the imports of js and jquery files
write your Jquery Code
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
and for header
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css
https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css
check that as follow, This will work fine.
Im trying to install tinymce to use with my text editor to allow the user to have a text box just like the stack overflow one. I cant get it to display though
ive put this in the head of my index file
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script src='https:https://cloud.tinymce.com/stable/tinymce.min.js'>
</script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'infotextarea'});
</script>
then in my info page ive put
<textarea id="infotextarea">Your content here.
</textarea>
can anyone explain why its not displaying
It may be that at the time you run the tinymce.init function, it is not yet rendered and there is no textarea in the DOM.
Try debugging your code on the following line:
<script>
debugger;
tinymce.init({selector:'infotextarea'});
</script>
When the web's execution has stopped on that line, in the development console of your browser type the following:
$('#infotextarea').length
If the size is greater than 0, textarea exists at that moment and it is another problem, but if it shows 0 is that you have not yet created that view, this will help us get more information about your problem.
If you want to target a <textarea> by ID you need to use a valid CSS selector.
selector: "#infotextarea"
(note the # at the beginning of the string)
I would also note you appear to be loading TinyMCE 3 separate times - I have no idea why you would need to do that - loading it once should be sufficient
Its not a perfect answer to my question, but i used ckeditor and it worked perfectly.
I must have a mistake somewhere that i or my team could not find with tinymce
I need a kind help from you guys. Currently, I am building a website from scratch, the client wants to add his twitter feed to the footer of the website.
But the problem is I could not customize the default twitter feed style. Here is the screenshot please have a look https://i.imgur.com/Gv28Ky1.png
Please help me to customize the twitter feed by CSS.
Kind Regards
Asad
I'm a relative novice, but I had some success using the following javascript function and calling it in the <body> element. Because Twitter grabs its styling through a script, it renders last so any styles in your css sheet will be overruled. The fix is to use a script to directly overwrite the embedded twitter stylesheets.
Try this:
Insert the following script into your website's header:
<script>
var widgetCSS = "" +
"#twitter-widget-0{width: 100% !important;}"+
".timeline-Tweet-text{color:red; font-size:20px !important;}" +
".timeline-Widget{background-color: red;" +
".TweetAuthor-name{color:white !important;}";
function customTwitter(){
var w = document.getElementById("twitter-widget-0").contentDocument;
var s = document.createElement("style");
s.innerHTML = widgetCSS;
s.type = "text/css";
w.head.appendChild(s);
}
</script>
Change the value of var widgetCSS to whatever you want your CSS to look like. I used the inspect feature on chrome to identify the classes that needed to be changed.
Finally, call the function paint(); in the body of html like so:
<body onload="customTwitter();">
...and you should see the changes to the affected elements.
Hope this helps.
There may be a better way of doing this, but currently I have an nicely encapsulated, JavaScript object which can have some configurable options. I include a chunk of HTML code on a page (via Dreamweaver 'snippets'), and on page load my JS file runs through the DOM and identifies any of those code chunks as a particular functionality, and goes ahead and sets that functionality up.
That's all fine up until I wish to add more than one object on a page, and have them be configurable. The important point here is that you can add as many of these objects onto a page as you like with my current setup - because they're generic at that point, and have no 'id' attribute.
Now I wish to configure these objects, so I thought, "How about an external file containing the config settings, which these objects check for and apply if a config object is found". This works fine too, but the config data feels a bit 'removed' now. I imagine this will be annoying for my other colleagues eventually, it's just another Thing To Remember.
So to my question, I'm happy to insert these code blocks which will still trigger self-instantiating objects on page load - but what I'd like to try is also inserting a script block which contains the config settings. I need a means of that inserted code block knowing that its parent element is the context for configuration.
Example code:
<div class="snippet">
<_contents of this 'snippet'_/>
<script type="text/javascript">
new Snippet().init({
rootElement: REFERENCE_TO_THIS_SCRIPT_TAGS_PARENT_NODE,
configOptionA: true,
configOptionB: false
});
</script>
</div>
Note: The <div class="snippet"> has no 'id' attribute on purpose, because I want to allow for more than one of these to be dropped onto a page.
Other solutions welcome, so long as they adhere to my few restrictions!
My other related question (now answered) addresses this now, essentially I ended up with:
<div class="snippet">
<elements... />
<script type="text/javascript">
var tmpVarName = 'configOb_'+Math.floor(Math.random()*1111111) ;
document[tmpVarName] = {
remainVisible:true,
hoverBehaviour:false
};
</script>
</div>
...and then in a script loaded on every page, which scans for any appropriate elements to instantiate and config:
var snippets = yd.getElementsBy(function(el){
return yd.hasClass(el, "snippet");
},null,document );
for( var i=0; i<snippets.length;i++ )
{
var s = snippets[i] ;
yd.generateId(s, '_snippet_'+i );
var tag = yd.getElementBy(function(el){
return true;
},'script',s );
var ob = new Snippet();
ob.setId( s.id );
ob.init( eval( tag.innerHTML ) );
}
For a more complete context of the above code;
yd = YAHOO.util.Dom
Snippet.init() and Snippet.setId() are exposed methods on a Module object called Snippet()
Now that my inserted 'chunks' of content have no id attribute, and dynamically evaluated, contextual config objects - I am free to add as many variants as I like. My only real concern is performance if a whole bunch of these Snippet() objects are added to my page (not likely).