All of my content elements are wrapped using stdWrap.wrap.
I am looking for a solution to wrap content elements in the page which i have my ke_search added differently .
Why do you need another HTML-markup?
Normaly you have another <div> around your search results which should enable you to add another styling by CSS.
your page may look like:
<body>
<div class="header">
:
</div>
<div class="content">
<div id="C123">
<h3>my very special CE</h3>
<p class="bodytext">with some text to demonstrate.</p>
</div>
<div id="345">
<h3>your search results:</h3>
<div class="search-results">
<a href="index.php?id=67&s=special">
<div id="C123">
<h3>my very special CE</h3>
<p class="bodytext">with some text to demonstrate.</p>
</div>
</a>
<a href="index.php?id=83&s=special">
<div id="C52">
<h2>just a demo</h3>
<p class="bodytext">this text is nothing special.</p>
</div>
</a>
</div>
</div>
</div>
</body>
with appropiate CSS the first CE looks completely different to the same CE in the search results.
h3 { color:black; font-size:16px; }
p.bodytext { color:#444; font-size:12px; }
.search-results h3 { color:blue; font-size:10px; font-weight:bold; }
.search-results p.bodytext { color:#44b; font-size:10px; font-style:italics; }
I answer my own question:
You can conditionally wrap specific content elements using the following typoscript snippet.
tt_content {
stdWrap {
if.value = tx_kesearch_pi2
{
wrap = |
innerWrap >
}
wrap = <div class="someotherclass">|</div>
}
}
Related
Are you able to suggest how to generate an empty 'div' tag for a modal window when the page is rendered the first time?
'div' content will be fetched with ajax request.
I would like to avoid fetching modal window content twice - first when the page is rendered and then when I click on the link to show modal window.
I do not use wicket modal window implementation.
I have a base ModalBorder class.
ModalBorder.java
public class ModalBorder extends Border {
public ModalBorder(String id) {
super(id);
}
}
with ModalBorder.html markup
<wicket:border>
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<wicket:body/>
</div>
</div>
</wicket:border>
AboutAppModalPanel.java
public class AboutModalPanel extends Panel {
public AboutModalPanel(String id) {
super(id);
setOutputMarkupId(true);
var mb = new ModalBorder("modalBorder");
mb.setRenderBodyOnly(true);
add(mb);
}
}
AboutAppModalPanel.html
<wicket:panel>
<div wicket:id="modalBorder">
<article class="media">
<div class="media-content">
<div class="content">
<p>
<strong>
About application content
</strong>
</p>
</div>
</div>
</article>
</div>
</wicket:panel>
I would like to achieve the below output:
MainPage.html
Page is rendered first time (with empty div)
<html>
<body>
...
<div class="modal" id="aboutAppModalPanel2">
<!-- modal is empty and hidden (not-active) -->
</div>
</body>
</html>
and then requesting modal content via ajax request
<html>
<body>
...
<div class="modal is-active" id="aboutAppModalPanel2">
<!-- modal is filled in and SHOWN (added 'is-active' class) -->
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>About application content</strong>
...
</div>
</body>
</html>
but now I am facing this issue:
Page is rendered first time (with filled in div)
<html>
<body>
...
<div class="modal" id="aboutAppModalPanel2">
<!-- modal is filled in and HIDDEN (not-active) -->
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>About application content</strong>
...
</div>
</body>
</html>
and then requesting modal content via ajax request
<html>
<body>
...
<div class="modal is-active" id="aboutAppModalPanel2">
<!-- modal is filled in and SHOWN (added 'is-active' class) -->
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>About application content</strong>
...
</div>
</body>
</html>
Are you able to suggest a solution?
I use Wicket 9.
Add an empty WebMarkupContainer instead of your panel to the page, making sure you call setOutputMarkupId(true) so it can be refreshed in an ajax call. Then replace it with your panel in the Link's onClick(AjaxRequestTarget target) method.
thanks for a tip. I needed to change my implementation but now it works.
// In page constructor:
// Instead of empty WebMarkupContainer you suggested an empty panel with setOutputMarkupId(true)
add(new AjaxEmptyPanel("aboutApp"));
add(showAboutAppLink());
// and AjaxLink:
private AjaxLink<String> showAboutAppLink() {
return new AjaxLink<>("showAboutApp", new ResourceModel("SHOW")) {
private static final long serialVersionUID = -3035458028030059416L;
#Override
public void onClick(AjaxRequestTarget ajaxRequestTarget) {
var aboutApp = new AboutAppModalPanel("aboutApp");
aboutApp.setOutputMarkupId(true);
getPage().replace(aboutApp);
ajaxRequestTarget.add(aboutApp);
}
};
}
How to get all heights from the div's nested inside the "GO" div:
<div id="GO" style="max-height: 100px;">
<div style="height: 569px;"></div>
<div style="height: 469px;"></div>
<div style="height: 269px;"></div>
<div style="height: 69px;"></div>
<div style="height: 169px;"></div>
</div>
<div id="STOP">
</div>
I tried using this code
var vales;
vales =$("#GO div").height();
//planB
vales =$("#GO").height();
But it didn't solve my problem
To iterate the children div's and get the height value, you can do something like this:
$("#GO > div").each(function() {
$(this).height();
});
As you can see you have many children divs in the parent one so you need to iterate over the children to get each of them. You can create a blank array and with use of each loop you can push the height values in it but i would suggest you to use .map() method which creates an array of returned values.
You can use .map().get():
var vales = $("#GO div").map(function(){
// return $(this).css('height'); // only if you want applied css values with 'px' etc.
return $(this).height();
}).get();
$('pre').html(JSON.stringify(vales));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>
<div id="GO" style="max-height: 100px;">
<div style="height: 569px;"></div>
<div style="height: 469px;"></div>
<div style="height: 269px;"></div>
<div style="height: 69px;"></div>
<div style="height: 169px;"></div>
</div>
<div id="STOP">
</div>
Do you want like this ?
$("#GO").children().each(function(){
$(this).height();
});
Is there any plugin that transfoms html elements (span, div) into a form ? One example is when editing LinkedIn profile which convert the section to be modified into a form.
Thanks all !
JQuery has the Wrap method, which you can use to throw the whole div / span into a form.
$('.inner').wrap('<form class="newform" action="..." method="..." />');
Found here: http://api.jquery.com/wrap/
Consider the following HTML:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Using .wrap(), we can insert an HTML structure around the inner elements like so:
$('.inner').wrap('<div class="new" />');
The new element is created on the fly and added to the DOM. The result is a new wrapped around each matched element:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
This will cause each to have a class corresponding to the text it wraps:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
Examples:
Example: Wrap a new div around all of the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrap("<div></div>");</script>
</body>
</html>
I have this HTML code
<div id="first" class="first">
One
<div id="second" class="second">
Second
<div id="third" class="third">
Third
<div id="fourth" class="fourth">
Fourth
<div id="fifth" clas="fifth">
Fifht
<div id="sixth" class="sixth">
Sixth
</div>
</div>
</div>
</div>
</div>
</div>
This code is from an external website.
I want to display 'Hi' using Simple HTML DOM from a URL.
Do you want to see something like this?
$el = $html->find("#first", 0);
while ($child = $el->children(1)) {
$el = $child;
}
echo $el->innertext;
I was impressed by the smoothness of the iScroll on iOS so i tried to implement it in my iPhone application.
The iScroll Demo works real fine on my iPhone. But only when the scrollable content is as simple as short text in <li> elements:
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
etc..
</ul>
When i tried to put a slightly more complex contents :
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
The smoothness is completely gone, and the list hardly scrolls ..
Is there a way to make my contents lighter ?
Any suggestions whatsoever ? Thank you very much !
Here's how i declare my iScroll element:
myScroll = new $wnd.iScroll(
elem,
{
useTransition : true,
topOffset : pullDownOffset,
hScroll : false,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
},
onScrollEnd : function(response) {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
app.#ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
}
}
});
[EDIT]
only by removing divs from:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
and making it to:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
<p>Some long text ....</p>
</li>
Made the scrolling much, much faster !! I have no idea why!
The code below will render your page the way webkit expects it. So redrawing will be massively quicker.
The HTML
<body>
<div class="headerFix">
<div class="header">
<!-- The content in header...logo/menu/e.t.c -->
</div>
</div>
<div class="content"><!-- you dont need this extra div but it keeps structure neat -->
<ul>
<li>List content here which can be as complex as needed</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="footerFix">
<div class="footer">
<!-- The content in footer -->
</div>
</div>
...
The css
.headerFix, .header {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.headerFix, .footerFix {
position:relative;
}
.header {
position:fixed;
top:0;
left:0;
/*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}
ul li {
/*basic list look for sample purposes*/
display:block;
min-height:40px;
border-bottom:solid 1px #777;
}
.footerFix, .footer {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.footer {
position:fixed;
top:0;
left:0;
/*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
/*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}
By the way I recommend using this meta tag in your html head to make sure you use the screen at its best
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
When I use 'iscroll-lite.js' library in my mobile application, I fall same problem. Then I had little change in 'iscroll-lite.js' library.
Simply add e.preventDefault() to '_move:' function in 'iscroll-lite.js';
It resolve my problem.