Users have the ability to freely edit HTML content, which is fine. However, I need to relocate all IFRAME elements into a DIV. I attempted the following code:
$('#rolunk_content iframe').html ('<div>1' + $('#rolunk_content iframe').html() + '2</div>');
Unfortunately, this code does not seem to have any effect.
UPDATE: Here is a link to a live example on JSFiddle: http://jsfiddle.net/nE3jG/
The reason your code isn't working is because it's attempting to set the innerHTML of an iframe, which is not possible. Additionally, there are errors in the rest of your logic as well.
Consider trying the following solution:
$("#rolunk_content iframe").each(function() {
var div = document.createElement('div'),
rel = this.nextSibling, par = this.parentNode;
div.appendChild(document.createTextNode("1"));
div.appendChild(this); // the iframe
div.appendChild(document.createTextNode("2"));
par.insertBefore(div,rel);
});
Vanilla JS may require more code to write, but it offers more reliability in terms of functioning as expected :)
To easily transfer an IFRAME into a DIV, you can utilize the jQuery method .append().
$("#newdiv").append($("#rolunk_content iframe"));
Your implementation may look something like this:
<div id="rolunk_content">
<p><iframe src="...." width="200" height="200></iframe></p>
</div>
<input id="d" type="button">
<hr>
<div id="newdiv">Your IFRAME will be moved here.</div>
As for the JavaScript:
$('#d').click(function() {
$("#newdiv").append($("#rolunk_content iframe"));
});
View the demonstration on Fiddle: http://jsfiddle.net/2HrA4/
For more information on using jQuery's .append() function, visit:
https://api.jquery.com/append/
Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure w ...
Utilizing the <Table/> component from http://www.material-ui.com/#/components/table, I am facing an issue where the checkboxes do not appear when rendering multiple instances of <TableRowColumn/>, corresponding to the number of objects in the a ...
By clicking on the "Run code Snippet" button or visiting this link, you may notice a significant amount of empty space at the beginning of the page. The images only become visible once you start scrolling down. I am looking for a solution to hide this emp ...
I have a Jsonp request that returns a block of HTML with the following structure: <div id="slider_wrapper" style=""> <div style="xxx" ><section style="xx">xx</section></div> <div style="xxx" ><section style=" ...
Does anyone know how to align the images vertically with the text on the "Board of Advisors" tab on THIS PAGE? Here is the shortened HTML code: <div class="four columns alpha"><img class="ImageBorder" src="LINK" alt="" /></div> <div ...
My familiarity with Model-View-Controller runs deep, having worked with it for years in server-side development using languages like PHP. Now, I find myself diving into JavaScript and embarking on a large project that utilizes SVG, Canvas, and other moder ...
I am faced with a challenge involving a lengthy navigation menu (.nav-main) nested within a fixed header (header). When the navigation menu is toggled using jQuery .toggle(), the content extends beyond the window height and does not scroll. I am looking fo ...
I'm currently working on my first laravel project with bootstrap (https://getbootstrap.com/) and I've encountered an issue related to mobile device responsiveness. The problem arises when using a basic table in bootstrap4 (the absence of the res ...
On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...
I am currently in the process of creating a custom video player and I need to include a full-screen button. However, when I click on it, the video does not expand to fill up the entire screen. I am using javascript, css3, and html5 for this project. Any as ...
Here is a basic component example that I'm working with: <template> <div> <b-form-group label="From:" label-align="left" label-for="nested-from"> <date-pick :displayFormat=&quo ...
I am currently working on a visualization app using js and python. The functionality of my app is as follows: There is a textbox in the browser where I input an URL The URL is then sent to Python via Flask In Python, the URL is processed to create ...
My issue lies in parsing an XML feed and extracting two fields (title and link), which is functioning correctly. I am now seeking a way to strip away all HTML tags and store the result in a CSV format, as shown below: title,link title,link title,link ...
I attempted to design a layout similar to the image provided, but I'm facing difficulties with overlapping the image on the red bar located on the right side. Could someone please guide me on how to achieve this using CSS within my Bootstrap framework ...
I'm currently working on creating a grid layout for my website and I've almost achieved the desired result. However, I'm facing an issue with the size of the "Projects" title within the grid. I want it to stand out and be larger compared to ...
After setting up a form in HTML that connects to a function in views.py within the Django framework, I decided to enhance it by adding a button that automatically populates the password field with a randomly generated password. To achieve this, I utilized ...
Currently, I'm in the process of developing a web application with the help of semantic-ui. The primary objective is to design a layout that comprises a sidebar along with a main content area. Initially, I assumed that utilizing grid would be the most ...
As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal ov ...
I'm having trouble getting this code to work, and I can't seem to figure out why... Take a look at my XML: <customer> <name>Cadence</name> <city>Lake Katrine</city> <state>NY</state> <zip ...
Hi, I am new to using bootstrap. Can anyone help me figure out how to achieve the look in the image using bootstrap-04? I want this design to be consistent across all devices, but I am having trouble implementing it. Any guidance is appreciated. Thank you ...